html – 仅允许数字输入文本框

我有一个数字输入文本框,我想允许用户编辑,但不希望允许用户输入除数字之外的任何其他文本.我希望他们只能使用数字输入框上的箭头.

<input type = "number" min="0" max="10" step="0.5"  input id="rating"   name = "rating" class = "login-input" placeholder = "rating 1-5:" value="0">

解决方法

您可以通过纯JavaScript实现此目的.在脚本中创建此函数并将其命名为onkeypress事件处理程序.

<script type="text/javascript">
  function AllowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
      e.preventDefault();
    }
  }
</script>

并像这样调用此函数onkeypress.

<input type="text" id="OnlyNumbers" onkeypress = "return AllowNumbersOnly(event)" />

工作Demo.

但是我会推荐使用jQuery编写JS的不引人注目的风格,因为我不喜欢污染HTML.

$(function(){
  $('#OnlyNumbers').keydown(function(e){
      return AllowNumbersOnly(e);
  });
});

要限制每个字符,可以省略if条件,并使用preventDefault()禁用所有键.

此外,您也可以使用return false,但在这种情况下,preventDefault()更好,并且应该明智地选择返回false.很高兴知道difference between both of them.