Question

我不知道如何解决这个问题：

用户可以在输入字段中键入一些数值。键入数字后，光标将移动到下一个输入字段。但它不起作用，如果用户打字太快，这意味着两个数字之间没有密钥。

因此，如果用户正在键入＆＃34; 12＆＃34; - 而不是＆＃34; 1＆＃34;和＆＃34; 2＆＃34; - ，应该有价值＆＃34; 1＆＃34;在第一个输入字段中，值＆＃34; 2＆＃34;在第二个输入字段中，焦点应设置为第三个输入字段。

<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>

$('form input').on('keydown', function(event) {        
    if (event.shiftKey || event.which <= 47 || event.which >= 58)
        return false;

}).on('keyup', function (event) {
    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});

http://jsfiddle.net/bbeg17r8/

Answer 1

您是否尝试过结合这两个条件的input事件，它适用于key events，cut/paste events等多个用户操作：

$('form input').on('input keypress', function(event) {     
    if (event.type == "keypress" && (event.shiftKey || event.which <= 47 || event.which >= 58))
        return false;


    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>

Answer 2

您可以在keydown上添加keyup事件触发器上的代码。

$('input').on('keydown', function(event) {   
    if (event.shiftKey || event.which <= 47 || event.which >= 58) {
        return false;
    }
    if (event.currentTarget.value.length >= 1) {
        $(event.currentTarget).next('input').focus();
    }
});

http://jsfiddle.net/bbeg17r8/2/

Answer 3

如果用户使用粘贴来输入他们的PIN（他们不应该这样做，但将会这样做），你需要更加精细地处理这个问题。

我会删除maxlength并在条目上的输入中分发文本。 keypress是处理实际文字按键的最佳事件，当然我们需要change和input。

这是一个粗略的版本：

$('input').on('keypress input change', function(event) {
    setTimeout(handleInputs, 0);
});
function handleInputs() {
  var focussed = false;
  var inputs = $("input").get();

  // Collect the values
  var text = inputs.reduce(
    function(acc, input) {
      return acc + input.value;
    },
    ""
  );

  // ...adjust `text` here if you want...

  // Distribute the values
  inputs.forEach(function(input, index) {
    input.value = text.charAt(index);
    if (!focussed && !input.value) {
      console.log("Focussing " + this.name);
      input.focus();
      focussed = true;
    }
  });
}

直播示例：

＆＃13;

$('input').on('keypress input change', function(event) {
	setTimeout(handleInputs, 0);
});
function handleInputs() {
  var focussed = false;
	var inputs = $("input").get();
	var text = inputs.reduce(
    function(acc, input) {
      return acc + input.value;
    },
    ""
  );
  inputs.forEach(function(input, index) {
    input.value = text.charAt(index);
    if (!focussed && !input.value) {
    console.log("Focussing " + this.name);
    	input.focus();
      focussed = true;
    }
  });
}

＆＃13;

<form>
  <input type="password" name="pin1" autofocus />
  <input type="password" name="pin2" />
  <input type="password" name="pin3" />
  <input type="password" name="pin4" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 4

这可以用来处理所有（我能想到的）情况：

plot(xLine.', b(:,1:nGrid).')

-jsFiddle-

（使用输入类型文字使其更清晰）

PS：我已经厌倦了jsFiddle没有更新正确的。由于最新的jsFiddle重大更新，这真的让我烦恼......

keyup和keydown事件，如果用户键入太快

4 个答案:

-jsFiddle-