JavaScript 不适用于数字锁定数字中两个以上的输入字段

Question

我使用 JavaScript 进行了表单验证，我使用它来仅允许输入字段中键盘上的数字，包括顶部数字和数字锁定数字。但是这个JavaScript仅适用于第一个输入字段，但我有几个输入字段如何调整它？

问题与键盘右侧的数字锁定数字有关。

在输入第二个和第三个时，数字锁定数字不起作用。怎么解决？

这是我的代码:

$(document).ready(function() {

  $("#inp1").keypress(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg1").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });

  $("#inp2").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg2").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });

  $("#inp3").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg3").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });

});

#errmsg {
  color: red;
}

#errmsg2 {
  color: blue;
}

#errmsg3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Number : <input type="text" name="quantity" id="inp1" />&nbsp;<span id="errmsg1"></span></p>
Number : <input type="text" name="quantity" id="inp2" />&nbsp;<span id="errmsg2"></span></p>
Number : <input type="text" name="quantity" id="inp3" />&nbsp;<span id="errmsg3"></span></p>

Answer 1

您使用了keypress对于第一个，但是 keydown为他人。如果将第二个和第三个更改为 keypress你的问题也将得到解决。您也可以像这样基本上优化您的代码，而无需更改太多内容。但还有更好的优化方法。

原始版本

在你说我需要使用这两个事件之后我添加了这个。

按键事件处理A和a不同的是，keydown 仅查找按下的按钮并处理 A和a相同的。你所需要的只是改变 (e.which < 48 || e.which > 57)至(e.which < 96 || e.which > 105)在按键事件中。

$(document).ready(function() {
  $("#inp1").keypress(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 48 || e.which > 57)) {
      $("#errmsg1").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });
  $("#inp2").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 96 || e.which > 105)) {
      $("#errmsg2").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });
  $("#inp3").keydown(function(e) {
    if (e.which != 8 && e.which != 0 && String.fromCharCode(e.which) != '-' && (e.which < 96 || e.which > 105)) {
      $("#errmsg3").html("* Input digits (0 - 9)").show().delay(2000).fadeOut("slow");
      return false;
    }
  });
});

#errmsg {
  color: red;
}

#errmsg2 {
  color: blue;
}

#errmsg3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Number : <input type="text" name="quantity" id="inp1" />&nbsp;<span id="errmsg1"></span></p>
Number : <input type="text" name="quantity" id="inp2" />&nbsp;<span id="errmsg2"></span></p>
Number : <input type="text" name="quantity" id="inp3" />&nbsp;<span id="errmsg3"></span></p>

小幅优化版本

$(document).ready(function() {
  //All ids seperated with commas(,) which means 'or'
  $("#inp1, #inp2, #inp3").each(function(i) {
    $(this).keypress(function(e) {
      if (e.which != 8 && e.which != 0 && String.fromCharCode(
          e.which) != '-' && (e.which < 48 || e.which >
          57)) {
        // i starts from zero but errmsg ids starts from 1 so we must use (i+1)
        $("#errmsg" + (i + 1)).html("* Input digits (0 - 9)").show()
          .delay(2000).fadeOut("slow");
        return false;
      }
    });
  });
});

#errmsg {
  color: red;
}

#errmsg2 {
  color: blue;
}

#errmsg3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Number : <input type="text" name="quantity" id="inp1" />&nbsp;<span id="errmsg1"></span></p>
Number : <input type="text" name="quantity" id="inp2" />&nbsp;<span id="errmsg2"></span></p>
Number : <input type="text" name="quantity" id="inp3" />&nbsp;<span id="errmsg3"></span></p>