是否有一种快速的方法可以将 HTML 文本输入 ( <input type=text />) 设置为仅允许输入数字键（加上“.”）？
HTML 文本输入仅允许数字输入
IT技术
javascript
jquery
html
2021-01-19 21:13:14
6个回答
注意：这是一个更新的答案。下面的评论指的是一个旧版本，它弄乱了键码。
JavaScript
在 JSFiddle 上自己尝试一下。
您可以<input>使用以下setInputFilter功能过滤文本的输入值（支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局以及自 IE 9 以来的所有浏览器） ：
// Restricts input for the given textbox to the given inputFilter function.
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);
} else {
this.value = "";
}
});
});
}
您现在可以使用该setInputFilter函数来安装输入过滤器：
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});
有关更多输入过滤器示例，请参阅JSFiddle 演示。另请注意，您仍然必须进行服务器端验证！
typescript
这是一个 TypeScript 版本。
function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].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 上亲自尝试一下。
使用这个 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="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />我已经长时间努力寻找一个好的答案，我们迫切需要<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) )">
这里的大多数答案都有使用键事件的弱点。
许多答案会限制您使用键盘宏、复制+粘贴和更多不需要的行为进行文本选择的能力，其他答案似乎依赖于特定的 jQuery 插件，这会用机枪杀死苍蝇。
无论输入机制如何（击键、复制+粘贴、右键单击复制+粘贴、语音到文本等），这个简单的解决方案似乎最适合我跨平台。所有文本选择键盘宏仍然可以工作，它甚至会限制用户通过脚本设置非数字值的能力。
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);