javascript - 手机输入法="tel"时，如何改变回车键的作用？

Question

我有一个 <input>盒子type="tel" ，当用户输入数字并在手机上按回车时，我想将焦点转移到选择框。但我不认为type="tel"在手机上给出了一个回车键，我认为这个键更像是一个下一个但我不知道这个键到底是什么。此代码适用于网络浏览器，但在我的手机上按下一个键总是将焦点转移到下一个 <input type="tel">盒子。

<input type="tel" name="load1" id="load1" maxlength="4" size="7" 
onkeydown="if (event.keyCode == 13) document.getElementById('numOfReps1').focus()">
<select id="numOfReps1" style="width:75px">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option selected="selected" value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      </select>

我认为我的问题来自 event.keyCode == 13 ，因为手机版没有回车键，但我不知道这个键到底是什么。

Answer 1

更新

当用户点击“完成”按钮时，focusout事件被触发。根据 jQuery 文档，blur 之间的区别而focusout是后者支持事件冒泡；与前一个事件不同，后者在 parent 元素接收到事件后触发。

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling).

$(document).ready(function () {
  $("#load1").on("focusout", function (e) {
    if(!$(this).val() == "") { /* input isn't empty, move to target */
      $("#numOfReps1").trigger("focus");
    }
  });
});

Demo - focusout ⁽¹⁾

---

next、prev 和done 没有e.which 和e.keyChar 移动按钮。相反，您可以使用 blur 事件并检查 type=tel 是否输入了值。如果为 true，则在您想要的任何项目上触发 focus，如果不是，则默认转到下一个元素。

$(document).ready(function () {
  $("#load1").on("blur", function (e) {
    if(!$(this).val() == "") { /* input isn't empty, move to target */
      $("#numOfReps1").trigger("focus");
    }
  });
});

我不知道你是否在使用 jQuery Mobile，如果你在使用它，请将 .ready() 替换为 pageinit。

$(document).on("pageinit", function () {
  /* code */
});

Demo - blur ⁽¹⁾

⁽¹⁾ 在 Safari Mobile - iPhone 5 上测试