有没有一种快速的方法来设置 HTML 文本输入（ <input type=text /> ）只允许数字击键（加 '。'）？

JavaScript 的

^{注意：这是一个更新的答案。下面的评论是指使用密钥代码搞乱的旧版本。}

下面脚本中的setInputFilter函数允许您在文本<input>上使用任何类型的输入过滤器，包括各种数字过滤器。这将正确处理自 IE 9 以来的复制 + 粘贴，拖放，键盘快捷键，上下文菜单操作，不可键入的键，光标位置，所有键盘布局和所有浏览器。 请注意，您仍然必须进行服务器端验证！

在 JSFiddle 上自己尝试一下。

// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

用法：

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

您可能想要使用的一些输入过滤器：

整数值（正面和负面）：
/^-?\d*$/.test(value)
整数值（仅限正数）：
/^\d*$/.test(value)
整数值（正数且达到特定限制）：
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
浮点值（允许.和,作为小数分隔符）：
/^-?\d*[.,]?\d*$/.test(value)
货币值（即最多两位小数）：
/^-?\d*[.,]?\d{0,2}$/.test(value)
十六进制值：
/^[0-9a-f]*$/i.test(value)

jQuery 的

还有一个 jQuery 版本。请参阅此答案或在 JSFiddle 上自行尝试。

HTML 5

HTML 5 具有<input type="number">的本机解决方案（请参阅规范），但请注意浏览器支持各不相同：

大多数浏览器仅在提交表单时验证输入，而不是在输入时验证。
大多数移动浏览器不支持step ， min和max属性。
Chrome（版本 71.0.3578.98）仍允许用户在字段中输入字符e和E另见这个问题。
Firefox（版本 64.0）和 Edge（EdgeHTML 版本 17.17134）仍然允许用户在该字段中输入任何文本。

在 w3schools.com 上亲自尝试一下。

更复杂的验证选项

如果你想做一些其他验证的点点滴滴，这可能很方便：

使用这个 DOM

<input type='text' onkeypress='validate(event)' />

而这个脚本

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

我一直在努力寻找一个很好的答案，我们迫切需要<input type="number" ，但是缺少这些，这两个是我能想到的最简洁的方法：

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

如果您不喜欢在删除之前显示一秒钟的未接受字符，则下面的方法是我的解决方案。请注意许多其他条件，这是为了避免禁用各种导航和热键。如果有人知道如何使这个变得紧凑，请告诉我们！

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

JavaScript 的

^{注意：这是一个更新的答案。下面的评论是指使用密钥代码搞乱的旧版本。}

下面脚本中的setInputFilter函数允许您在文本<input>上使用任何类型的输入过滤器，包括各种数字过滤器。这将正确处理自 IE 9 以来的复制 + 粘贴，拖放，键盘快捷键，上下文菜单操作，不可键入的键，光标位置，所有键盘布局和所有浏览器。 请注意，您仍然必须进行服务器端验证！

在 JSFiddle 上自己尝试一下。

// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

用法：

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

您可能想要使用的一些输入过滤器：

整数值（正面和负面）：
/^-?\d*$/.test(value)
整数值（仅限正数）：
/^\d*$/.test(value)
整数值（正数且达到特定限制）：
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
浮点值（允许.和,作为小数分隔符）：
/^-?\d*[.,]?\d*$/.test(value)
货币值（即最多两位小数）：
/^-?\d*[.,]?\d{0,2}$/.test(value)
十六进制值：
/^[0-9a-f]*$/i.test(value)

jQuery 的

还有一个 jQuery 版本。请参阅此答案或在 JSFiddle 上自行尝试。

HTML 5

HTML 5 具有<input type="number">的本机解决方案（请参阅规范），但请注意浏览器支持各不相同：

大多数浏览器仅在提交表单时验证输入，而不是在输入时验证。
大多数移动浏览器不支持step ， min和max属性。
Chrome（版本 71.0.3578.98）仍允许用户在字段中输入字符e和E另见这个问题。
Firefox（版本 64.0）和 Edge（EdgeHTML 版本 17.17134）仍然允许用户在该字段中输入任何文本。

在 w3schools.com 上亲自尝试一下。

更复杂的验证选项

如果你想做一些其他验证的点点滴滴，这可能很方便：

使用这个 DOM

<input type='text' onkeypress='validate(event)' />

而这个脚本

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

我一直在努力寻找一个很好的答案，我们迫切需要<input type="number" ，但是缺少这些，这两个是我能想到的最简洁的方法：

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

如果您不喜欢在删除之前显示一秒钟的未接受字符，则下面的方法是我的解决方案。请注意许多其他条件，这是为了避免禁用各种导航和热键。如果有人知道如何使这个变得紧凑，请告诉我们！

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

协慌网

HTML 文本输入仅允许数字输入

答案

JavaScript 的

jQuery 的

HTML 5

更复杂的验证选项

JavaScript 的

jQuery 的

HTML 5

更复杂的验证选项