我对于更好的用户体验的解决方案:

超文本标记语言

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

细节:

首先，输入类型:

数字显示的上下箭头缩小了实际的输入空间，我发现它们很丑，只有当数字表示一个数量时才有用(比如电话、区号、id……)不需要) Tel提供类似的没有箭头的数字浏览器验证

使用[number / tel]也有助于在移动设备上显示数字键盘。

对于JS验证，我最终需要2个函数，一个用于正常的用户输入(按键)，另一个用于复制+粘贴修复(更改)，其他组合会给我一个糟糕的用户体验。

我使用更可靠的KeyboardEvent。key代替现在已弃用的KeyboardEvent.charCode

根据你的浏览器的支持，你可以考虑使用Array.prototype.includes()而不是名字不好的Array.prototype.indexOf() (true / false结果)

input type="number"是一个HTML5属性。

在另一种情况下，这将帮助你:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

如果你正在尝试有棱角的，这可能会有帮助

获取输入的数字(带小数点)，然后

<input [(ngModel)]="data" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

现在这将不能正确地更新模型中的值 为了显式地改变model的值，添加这个

<input [(ngModel)]="data" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" (change)="data = $event.target.value">

更改事件将在模型中的值更新后触发，因此它也可以用于响应式表单。

有一个更简单的解决方案，之前没有人提到过:

inputmode="numeric"

阅读更多信息:https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

这是我的一句话解决方案!

$('#input-field').keypress(e => !String.fromCharCode(e.which).match(/\D/g));

给输入字段一个类(<input class="digit"…>)和使用jquery如下所示。

jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

上面的代码还可以禁用Ctrl+V笔画和右键单击笔画中的特殊字符。