Question

我有一个<input>框type="tel"，当用户输入一个号码并在手机上按Enter键时，我想将焦点移到选择框。但我不认为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之间的区别在于后者支持事件 bubbling ;与前一个事件不同，一旦父元素收到事件，它就会触发。

当焦点事件或其中的任何元素失去焦点时，会将焦点事件发送到元素。这与模糊事件的不同之处在于它支持从父元素检测焦点丢失（换句话说，它支持事件冒泡）。

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

Demo - focusout ^（1）

next ，上一步和已完成移动按钮没有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 ^（1）

^（1）在Safari Mobile上测试 - iPhone 5

在手机上使用输入类型=“tel”时，如何更改输入键的功能？

1 个答案:

更新