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

Question

有没有一种快速的方法可以将 HTML 文本输入（ <input type=text /> ）设置为只允许数字键击（加 ‘.‘）？

原文由 Julius A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意： 这是一个更新的答案。下面的评论指的是一个乱码的旧版本。

JavaScript

在 JSFiddle 上 自己尝试一下。

您可以使用以下 setInputFilter 函数过滤文本 <input> 的输入值（支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局、有效性错误消息，以及 自 IE 9 以来的所有浏览器）：

 // Restricts input for the given textbox to the given inputFilter function.
 function setInputFilter(textbox, inputFilter, errMsg) {
 ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
 textbox.addEventListener(event, function(e) {
 if (inputFilter(this.value)) {
 // Accepted value
 if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
 this.classList.remove("input-error");
 this.setCustomValidity("");
 }
 this.oldValue = this.value;
 this.oldSelectionStart = this.selectionStart;
 this.oldSelectionEnd = this.selectionEnd;
 } else if (this.hasOwnProperty("oldValue")) {
 // Rejected value - restore the previous one
 this.classList.add("input-error");
 this.setCustomValidity(errMsg);
 this.reportValidity();
 this.value = this.oldValue;
 this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
 } else {
 // Rejected value - nothing to restore
 this.value = "";
 }
 });
 });
 }

您现在可以使用 setInputFilter 函数来安装输入过滤器：

 setInputFilter(document.getElementById("myTextBox"), function(value) {
 return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
 }, "Only digits and '.' are allowed");

将您喜欢的样式应用于输入错误类。这里有一个建议：

 .input-error{
 outline: 1px solid red;
 }

有关更多输入过滤器示例，请参阅 JSFiddle 演示。另请注意，您仍然 必须进行服务器端验证！

打字稿

这是一个 TypeScript 版本。

 function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
 ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
 textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
 if (inputFilter(this.value)) {
 this.oldValue = this.value;
 this.oldSelectionStart = this.selectionStart;
 this.oldSelectionEnd = this.selectionEnd;
 } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
 this.value = this.oldValue;
 if (this.oldSelectionStart !== null &&
 this.oldSelectionEnd !== null) {
 this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
 }
 } else {
 this.value = "";
 }
 });
 });
 }

jQuery

还有一个 jQuery 版本。看到 这个答案。

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 上 亲自尝试。

原文由 Ian G 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用这个 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();
  }
}

原文由 geowa4 发布，翻译遵循 CC BY-SA 4.0 许可协议