在手机上使用 input type="tel" 时，如何更改回车键的作用？答案

【问题标题】：When using input type="tel" on a mobile phone, how can I change what the enter key does?在手机上使用 input type="tel" 时，如何更改回车键的作用？
【发布时间】：2014-02-04 21:33:22
【问题描述】：

我有一个<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，因为移动版没有回车键，但我不知道该键到底是什么。

【问题讨论】：

你在用jquery mobile吗？

标签： javascript jquery html jquery-mobile mobile

【解决方案1】：

更新

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

当元素或其中的任何元素失去焦点时，会向该元素发送 focusout 事件。这与 blur 事件不同，它支持检测父元素失去焦点（换句话说，它支持事件冒泡）。

$(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 是否输入了值。如果为真，则在您想要的任何项目上触发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 上测试

【讨论】：