jquery 自动对焦和最大长度为类型数

jk9hmnmh 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(106)

我有一个程序，当你在前一个字段中输入允许的最大值后，它会跳到下一个字段。input maxlength属性对type=“number”不起作用。因此，我有一个JavaScript来确保maxlength被遵循，并且只允许数字。

<form action="myprogram.htm" method="post" name="myform">
<input type="number" size="5" maxlength="2" name="num1" onkeypress="return isNumberKey(event);" required>
<input type="number" size="5" maxlength="2" name="num2" onkeypress="return isNumberKey(event);" required>
<input type="number" size="5" maxlength="2" name="num3" onkeypress="return isNumberKey(event);" required>
</form>

<script type="text/javascript">
$("input").bind("input", function() {
    var $this = $(this);
    setTimeout(function() {
        if ( $this.val().length >= parseInt($this.attr("maxlength"),10) )
            $this.next("input").focus();
    },0);
});

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
</script>

字符串
然而，有三个问题我似乎无法解决。
1.最大长度适用于前两个字段，num 1和num 2。但是第三个字段可以输入超过2！不知道为什么会发生这种情况。
1.如果这3个字段已经填好了，例如11，22，33。如果你移动到第一个字段并用数字555覆盖它，它会跳到第二个字段22，并在第二个字段的末尾添加第三个“5”。所以你最终会得到225。在这种情况下，JavaScript似乎无法强制执行maxlength。
1.当你点击第一个字段“11”并尝试使用上下箭头来增加或减少数字时。当你增加或减少第一个字段时，焦点/高亮跳转到下一个字段22。我知道第一个字段已经达到了2的最大长度，但我的光标仍然在第一个字段的箭头上。
有什么办法可以解决这些问题吗？先谢谢你了。

jquery

来源：https://stackoverflow.com/questions/77561426/auto-focus-and-maxlength-for-type-number

1条答案

按热度按时间

mnemlml81#

下面是一个工作示例：

function enforceMaxLength(element) {
  if (element.value.length > 2) {
    element.value = element.value.slice(0, 2); // maxlength of 2
  }
}

$("input[type='number']").on('input', function(e) {
  enforceMaxLength(this);

  var nonArrowKeyTyped = $(this).data('nonArrowKeyTyped');
  if (nonArrowKeyTyped && this.value.length >= 2) {
    // shift focus if not using arrows and input full
    $(this).next("input").select();
    $(this).next("input").focus();
  }
  $(this).removeData('nonArrowKeyTyped');
});

$("input[type='number']").on('keydown', function(e) {
  var key = e.which || e.keyCode;

  if (!((key >= 48 && key <= 57) || // numeric keys
      (key >= 96 && key <= 105) || // numeric keypad
      key === 8 || // backspace
      key === 46 || // delete
      key === 9 || // tab
      key === 13 || // enter
      key === 37 || key === 39 || // left and right arrows
      key === 38 || key === 40 || // up and down arrows
      key <= 31 // control keys
    )) {
    e.preventDefault();
  }

  // check for non-arrow keys (excluding tab, shift, ctrl, etc.)
  if (![9, 16, 17, 18, 91, 38, 40].includes(key)) {
    $(this).data('nonArrowKeyTyped', true);
  }

  // allow shift tab
  if (e.shiftKey && key === 9) {
    $(this).prev("input").focus();
    e.preventDefault();
  }
});

$("input[type='number']").on('click', function() {
  // set focus when arrows used
  $(this).focus();
});

个字符
此代码片段将：
1.每次输入最多允许2个字符
1.当当前活动输入达到其字符容量时，将用户的焦点移动到下一个输入
1.使用输入的箭头调整值时不会移动用户的焦点
1.当箭头用于调整输入值时，
1.将允许用户在输入之间向前和向后跳
1.将允许用户删除输入中的值并输入新值
1.当焦点移到下一个输入时，将选择下一个输入中的值
1.经过测试，可在Firefox、Safari和Chrome上运行

赞(0）回复(0）举报 12个月前

我来回答

jquery 自动对焦和最大长度为类型数

1条答案

相关问题

热门标签

最新问答