在手机上单击“转到”时停止表单提交

Stop form submitting when clicking 'Go' on mobiles

本文关键字：表单提交 转到 手机 单击      更新时间：2023-09-26

有没有办法将按钮链接到输入，以便手机知道当您在 .NET 上下文中按键盘上的Next或Go时该怎么做（即在输入上按"Go"会伪造单击下一个按钮而不是提交表单）？

让我们讨论一下代码。我有以下标记，其中injected-via-js通过javascript注入到大型形式（渐进式增强）中。

<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时，它会伪造按钮按下（在我的情况下，它绑定了一个重要事件）。但是，在某些旧的Android设备上，按Go将提交表单，这不是我想要的。澄清一下：我希望Go按钮伪造按钮按下，而不是提交表单。

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

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

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

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

"Go"和"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.keys来确定按下的键代码。

相关文章：