使用 replace() 清除减号和点清除输入类型编号字段答案

【问题标题】：Minus sign and dot clear input type number field with replace()使用 replace() 清除减号和点清除输入类型编号字段
【发布时间】：2017-05-03 13:24:45
【问题描述】：

我使用replace() 从输入字段中删除非数字字符，如下所示：

&lt;input type="number" oninput="this.value = this.value.replace(/[^\d]/g,'');"&gt;

效果很好，但是当我输入几个数字后跟一个减号或一个点（在 Android 上它必须是两个点）时，整个字段都会被清除。仅当输入类型设置为“数字”时才会发生这种情况，而不是设置为“文本”时，但我需要“数字”才能在移动设备上显示数字键盘。

为什么会这样？

为了澄清，我只想允许 [0-9]，而不是其他可能的数字字符，例如 [.-e]。

【问题讨论】：

Phone: numeric keyboard for text input的可能重复
该线程没有回答我的问题，即为什么该字段被清除，并且答案也没有提供有效的解决方案：最流行的答案不会在我的 Android 设备上显示数字键盘，第二个使用number 类型字段，因此有同样的问题。
好的。认为它可能会有所帮助:)
它很有帮助也很有趣，但不是重复的 :)

标签： javascript

【解决方案1】：

这里有一个解决方案：

function cancelEvent(event) {// cross-browser code
  event.cancelBubble = true;
  event.returnValue = false;
  if(event.stopPropagation)
    event.stopPropagation();
  if(event.preventDefault)
    event.preventDefault();
}

document.getElementById('testInput').addEventListener('keydown', function(event) {
  var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;// cross-browser code
  if(keyCode != 8 && (keyCode < 48 || keyCode > 57)){// excludes non-numeric inputs
    cancelEvent(event);
  }
});

document.getElementById('testInput').addEventListener('textInput', function(event) {
  event = window.event || event;// cross-browser code
  if(/[^0-9]/.test(event.data)) {
    cancelEvent(event);
  }
});

&lt;input type="number" id="testInput"&gt;

我从这个答案中提取了部分跨浏览器代码：https://stackoverflow.com/a/585590/3514976

【讨论】：

你测试了吗？ [^\d]、[^0-9]或[^0123456789]，效果是一样的。
不，因为我是个白痴。我将使用可行的解决方案对其进行编辑。
感谢您的努力，但这仍然允许 - 和 .在 Android 的数字键盘上。不幸的是，这两个字符代码都为 229，将其添加到您的 if() 并不会阻止它们被输入。
你是对的，我尝试了所有方法，但那个愚蠢的点总是通过。我也没有在网上找到任何解决方案。我已经与移动设备上的数字键盘有关，而且它从来都不是很漂亮...我将删除此答案，因为它不能解决您问题中的问题。
好的，抱歉所有的来回。这次解决方案确实有效：P