【问题标题】:Behavior of "enter/next" key on mobile browsers when entering into a number field输入数字字段时移动浏览器上的“enter/next”键的行为
【发布时间】:2013-10-01 17:33:23
【问题描述】:

我这里有一行代码(不涉及表单):

<input type="number" min="0" max="9999999" id="inSku" name="inSku">

以前,我使用的是type="text",但在默认情况下提供全键盘的移动浏览器上,有问题的框只接受数字输入。从逻辑上讲,当移动浏览器关注type="number" 字段时,它们将变为唯一数字键盘 - 但是,我目前依靠一点点jQuery 来处理表单内容的提交。这是代码:

$("#inSku").keyup(function (event) {
    if (event.keyCode == 13) {
        ringItem();
    }
});

这里的问题是,在普通的 android 手机键盘上(我假设有很多其他移动浏览器) - 当使用“数字”键盘时,常规字母数字 android 键盘上的 enter 键已经改变到“下一步”按钮。在我的例子中,这个按钮接受文本输入并将其粘贴在地址字段中,并不完全理想。有没有办法利用键盘上的下一个按钮并让它执行我的其他 javascript 函数?

【问题讨论】:

  • 对于那些来这里寻找确切键码的人:Chrome Android 上 next 键的键码是 9(这是桌面上的 Tab 键键盘)。

标签: javascript jquery html forms mobile


【解决方案1】:

试试

 $('#inSku').keyup(function (e) {
   alert('Key pressed: ' + e.keyCode);
 });

这里的想法是按下next 按钮并找到该键码。完成后,您可以将其添加到您的逻辑中,例如 if (event.keyCode === 13 || event.keyCode === ...)。您可以根据需要添加任意数量的限定符以支持多个键盘和设备。

【讨论】:

  • 在 Android 4.2.x 上,在三星 S4 上,它仅适用于 keydown 事件,不适用于 keyup
  • 在我的情况下,OnePlus 6 似乎没有触发“下一步”按钮的 keydown 或 keyup 事件
猜你喜欢
  • 1970-01-01
  • 2013-12-10
  • 1970-01-01
  • 2011-06-06
  • 2021-02-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-09-20
相关资源
最近更新 更多