type=number输入框maxlength与自动聚焦问题修复求助

针对你遇到的三个问题，我们可以通过调整JavaScript逻辑逐一解决，以下是具体修复思路和优化后的代码：

问题分析与修复思路 #

1. 第三个字段可输入超过限制长度：原代码仅在达到长度时跳转，未对无后续输入框的字段做长度截断，需强制所有字段内容不超过maxlength设定值。
2. 覆盖输入时字符追加到下一字段：原代码在输入达到长度后跳转，但未阻止后续字符输入，需在键盘输入阶段就拦截超过长度的输入，同时确保每个字段内容实时截断。
3. 上下箭头调整数值时自动跳转：点击输入框的上下箭头会触发input事件导致误跳转，需限制数值的最大值为maxlength对应的上限（如2位则为99），并区分输入字符和数值调整的场景，仅在输入字符达到长度时跳转。

优化后的完整代码 #

<form action="myprogram.htm" method="post" name="myform">
  <input type="number" size="5" maxlength="2" name="num1" required>
  <input type="number" size="5" maxlength="2" name="num2" required>
  <input type="number" size="5" maxlength="2" name="num3" required>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // 实时处理输入内容：截断长度 + 跳转逻辑
  $("input[type='number']").on("input", function() {
    var $this = $(this);
    var maxlength = parseInt($this.attr("maxlength"), 10);
    if (!maxlength) return;

    var value = $this.val();
    // 过滤非数字并截断到指定长度
    var trimmedValue = value.replace(/[^0-9]/g, "").slice(0, maxlength);
    $this.val(trimmedValue);

    // 仅当输入字符达到长度，且不是数值溢出（如99→100）时才跳转
    if (trimmedValue.length === maxlength && value.length <= maxlength) {
      var nextInput = $this.next("input[type='number']");
      if (nextInput.length) {
        nextInput.focus();
      }
    }
  });

  // 键盘输入拦截：仅允许数字和必要控制键，达到长度时直接跳转
  $("input[type='number']").on("keypress", function(evt) {
    var charCode = evt.which || evt.keyCode;
    // 允许数字和控制键（退格、删除等）
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      evt.preventDefault();
      return false;
    }

    var maxlength = parseInt($(this).attr("maxlength"), 10);
    if ($(this).val().length >= maxlength) {
      evt.preventDefault();
      var nextInput = $(this).next("input[type='number']");
      if (nextInput.length) {
        nextInput.focus();
      }
      return false;
    }
    return true;
  });

  // 限制数值最大值，避免上下箭头调整溢出
  $("input[type='number']").on("change", function() {
    var $this = $(this);
    var maxlength = parseInt($this.attr("maxlength"), 10);
    if (!maxlength) return;
    var maxVal = Math.pow(10, maxlength) - 1;
    var currentVal = parseInt($this.val(), 10);
    
    if (currentVal > maxVal) {
      $this.val(maxVal);
    } else if (currentVal < 0) { // 若不需要负数可删除此分支
      $this.val(0);
    }
  });
});
</script>

关键优化点说明 #

• 强制长度截断：所有字段在input事件中都会过滤非数字内容并截断到maxlength长度，确保不会出现超长度输入。
• 键盘输入拦截：在keypress阶段直接阻止超过长度的输入，同时允许退格、删除等必要操作，避免覆盖输入时字符溢出到下一字段。
• 数值调整限制：通过change事件限制数值最大值，点击上下箭头调整时，数值不会超过maxlength对应的上限（如2位为99），也不会触发误跳转。

内容的提问来源于stack exchange，提问作者Jack