javascript - 在手机上点击 'Go' 时停止表单提交

Question

有没有办法将按钮链接到输入，以便移动设备知道在 .NET 上下文中按键盘上的 Next 或 Go 时要执行的操作(即，在输入上按“Go”会假冒单击“下一步”按钮，而不是提交表单)？

让我们谈谈代码。我有以下标记，其中 injected-via-js 通过 javascript 注入(inject)到一个大表单中(渐进增强)。

<form class="dotNET-form-wrapper">
    <div class="injected-via-js">
        <div>
            <span>&pound;</span>
            <input type="number" />
        </div>
        <div>
            <button>accept</button>
        </div>
    </div>

    <!-- More form elements -->
</form>

在大多数移动浏览器上，当您更改数字输入中的值并按 Go 或 Enter 时，它会伪造按钮按下(在我的情况下有一个重要事件)与其绑定(bind))。然而，在一些旧的 Android 设备上，按 Go 将会提交表单，这不是我想要的。澄清一下:我希望使用Go按钮来假装按下按钮，而不是提交表单。

注意: .NET 仅与这个问题相关，因为所有内容都包含在表单中，这意味着我无法围绕输入和按钮创建单独的表单并劫持新表单的提交。

我制作了一个 JSBin，我可以在 Android 2.2 手机上复制此错误，尽管我认为它也存在于其他不良浏览器上。它在 iOS 6+ 和 Android 2.3+ 上按预期工作。

这是演示页面:http://jsbin.com/tebizoda/2

这是编辑版本:http://jsbin.com/tebizoda/2/edit

Answer 1

“Go”和“Enter”都有类似于键盘上的 Enter 的键码 (13)，因此您应该创建一个 JavaScript 或 jQuery 函数来覆盖默认行为并仅触发按钮按下。类似于(jQuery 中的示例):

$(your_form_or_input).keypress(function (e) {
  if (e.keyCode == 13) {
    return false;
  } else {
    // your code here...
  }
});

请注意，某些浏览器使用 e.keyCode，其他浏览器使用 e.which 来确定按下的按键代码。