html - 按钮 html 在 IOS 上触发事件键盘？

Question

我们已经建立了一个带有登录页面的网站 - 登录页面是字段集中的一个简单表单 - 令人讨厌的是，当使用 iPad 时，只要按下按钮就会触发键盘 - 它在加载下一页时保持事件状态 - 我可以理解为什么 - 以下是表单代码 - 有什么方法可以禁用此功能吗？

<section>
<h3>Login</h3>



<form method="post" action="/Login" novalidate="novalidate" _lpchecked="1">    <fieldset>
    <label class="ui-front legend icon-img-inside">
        <label for="FormModel_UserName">User Name</label>
        <input type="text" value="" name="FormModel.UserName" id="FormModel_UserName" data-val-required="Please provide your User Name" data-val="true" aria-required="true" aria-describedby="FormModel_UserName-error" class="input-validation-error" aria-invalid="true">
        <span data-valmsg-replace="true" data-valmsg-for="FormModel.UserName" class="field-validation-error"><span id="FormModel_UserName-error" class="">Please provide your User Name</span></span>
        <img alt="Icon: Person" src="/css/img/icons/icon-user.svg">
    </label>
</fieldset>
<fieldset>
    <label class="ui-front legend icon-img-inside">
        <label for="FormModel_Password">Password</label>
        <input type="password" name="FormModel.Password" id="FormModel_Password" data-val-required="Please provide your Password" data-val="true" aria-required="true" class="input-validation-error" aria-describedby="FormModel_Password-error">
        <span data-valmsg-replace="true" data-valmsg-for="FormModel.Password" class="field-validation-error"><span id="FormModel_Password-error" class="">Please provide your Password</span></span>
        <img alt="Icon: Pencil" src="/css/img/icons/icon-pencil.svg">
    </label>
</fieldset>
<div data-valmsg-summary="true" class="validation-summary-errors"><ul>   <li>Please provide your User Name</li><li>Please provide your Password</li>   </ul></div>    <fieldset>
    <button class="button" name="submit" type="submit">
        <i class="key"></i>
        <span>Login</span>
    </button>
</fieldset>

<!-- Javascript detection -->
<span class="result-login" id="result"></span>

Answer 1

您可以尝试禁用 native 默认提交过程并使用 js 提交，如下所示:

document.getElementsByClassName('button')[0].onclick = function(e){
    e.preventDefault(); 
    document.getElementById('frm1').submit();
}

查看此处的代码，我更改了一些标签名称，也查看 html Pane ..:http://codepen.io/mkdizajn/pen/EgmPQR?editors=1010

我看不到这个现场和测试，但我希望这有帮助..