javascript - keyup 事件处理程序更改焦点不适用于快速打字

Question

我想要一个 PIN 输入表单，其中每个字符都输入到单独的 html 输入中。

我正在 try catch JavaScript 中的 keyup 事件，以便我可以将焦点更改为下一个输入元素，从而使用户无需通过单击鼠标或选项卡自行更改它。

除非用户打字速度非常快，否则它会起作用。例如，如果用户非常快地键入字符“1”和“2”，我发现第一个输入现在正确地具有字符“1”，而第二个输入仍然为空，并且焦点已移至第三个输入输入。

为什么？

代码如下:

$(document).ready(function () {

            $('.pinchar').keyup(function (e) {
				
                if (
                    (e.which == 8) //backspace
                    || (e.which == 46) // del
                    || (e.which == 9) // tab
                    || (e.which == 13) // return
                    || (e.which == 27) // esc
                    || (e.which == 37) // arrow
                    || (e.which == 38) // arrow
                    || (e.which == 39) // arrow
                    || (e.which == 40) // arrow
                    || (e.which == 27) // esc
                    || (e.which == 20) // CAPS LOCK 
                    || (e.which == 17) // Ctrl
                    || (e.which == 18) // Alt 
                    || (e.which == 16)) { //shift

                    return false;
                } else {
                    $(this).parent().next().find('.pinchar').focus();
                }
            });
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="enterPINTable">
      <tr>
        <td>
          <input name="txtPIN1" id="txtPIN1" class="pinchar" size="1">
        </td>
        <td>
          <input name="txtPIN2" id="txtPIN2" class="pinchar" size="1">
        </td>
        <td>
          <input name="txtPIN3" id="txtPIN3" class="pinchar" size="1">
        </td>
        <td>
          <input name="txtPIN4" id="txtPIN4" class="pinchar" size="1">
        </td>
      </tr>
    </table>

Answer 1

当您按下一个键，然后在释放它之前按下另一个键时，

keyup 将失败。事件的顺序为 keydown 1、keydown 2、keyup 1、keydown 2。但是，由于字符是在 keydown (和 keypress)之后生成的，因此在第一个 keyup< 之前的 input 中已经有两个字符 在这种情况下发生事件。

尝试使用 input 事件:

  $('.pinchar').on('input', function (e) {
       // ... etc.

任何更改都会立即触发。

但要正确处理其他键，您还需要捕获 keydown 事件(对于箭头键和退格键)。

我建议使用这段代码:

$(document).ready(function () {
    var $inputs = $(".enterPINTable .pinchar");
    function step(inp, dir, clr) {
        if (clr) $(inp).val("");
        var buffer = $(inp).val(); // get excess characters
        // spread characters in next boxes to ensure max 1 char
        var curr = $inputs.index(inp);
        for (var i = curr, j = 0; j < buffer.length && i < $inputs.length; i++, j++) { 
             $inputs.eq(i).val(buffer[j]);
        }
        if (dir < 0) curr-= curr > 0;
        else curr = Math.min(curr + (j||dir), $inputs.length-1);
        var $next = $inputs.eq(curr);
        $next.focus();
        setTimeout(function () { 
            $next.select();
        }, 0);
        return false;
    }
    $inputs.on("focus", function () {
        $(this).select(); // always select the "whole" (1 char) text
    }).on("mouseup", function () { // Attempt to unselect?
        setTimeout(function () { // Keep character selected....
            $(this).select();
        }.bind(this));
    }).on("keydown", function (e) {
        if (e.key == "ArrowLeft" || e.key == "ArrowUp") return step(this, -1);
        if (e.key == "ArrowRight" || e.key == "ArrowDown") return step(this, 1);
        if (e.key == "Backspace") return step(this, -1, 1);
    }).on("input", function (e) {
        step(this, 0);
    }).eq(0).focus();
});

.pinchar { width: 1em; text-align: center }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="enterPINTable">
  <tr>
    <td>
      <input name="txtPIN1" id="txtPIN1" class="pinchar">
    </td>
    <td>
      <input name="txtPIN2" id="txtPIN2" class="pinchar">
    </td>
    <td>
      <input name="txtPIN3" id="txtPIN3" class="pinchar">
    </td>
    <td>
      <input name="txtPIN4" id="txtPIN4" class="pinchar">
    </td>
  </tr>
</table>

上面的代码旨在始终选择当前字符，这样如果您键入另一个字符，它就会替换当前字符。如果您成功删除选择(并不容易)并尝试添加第二个字符，它将出现在下一个框中。从剪贴板粘贴一系列字符也会导致每个输入框传播一个字符。

左、右、tab、shift+tab、退格键和删除键按预期工作。

使用 CSS 调整输入大小并使文本居中，似乎可以提供更好的结果。