有没有一个快速的方法来设置一个HTML文本输入(<input type=text />
),只允许数字按键(加'.')?最低限度后,数字值在开始时不允许,如0.0允许但.0*不允许。
注意:这是一个更新的答案。下面的评论指的是旧版本,该版本乱用了关键代码。
自己试试[在JSFiddle][1].
你可以用下面的setInputFilter'函数来过滤文本
<input>`的输入值(支持Copy+Paste, Drag+Drop, 键盘快捷键,上下文菜单操作,非打字键,光标位置,不同的键盘布局,以及自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.oldValue = "";
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);
}
});
});
}
你现在可以使用 "setInputFilter "函数来安装一个输入过滤器。
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}
这里还有一些输入过滤器的例子,可能会有帮助。
return /^-?\d*$/.test(value); // Integer
return /^\d*$/.test(value); // Integer >= 0
return /^\d*$/.test(value) && // Integer >= 0 and <= 500
(value === "" || parseInt(value) <= 500);
return /^-?\d*[.,]?\d*$/.test(value); // Float (accept both '.' and ',' as decimal separator)
return /^-?\d*[.,]?\d{0,2}$/.test(value); // Currency (i.e. at most two decimal places)
return /^[a-z]*$/i.test(value); // A-Z only
return /^[0-9a-f]*$/i.test(value); // Hexadecimal
注意,你仍然必须做服务器端的验证!**
也有一个jQuery版本。见这个答案或自己尝试[在JSFiddle][4]。
HTML 5有一个原生的解决方案,即<input type="number">
(见规范),但要注意,浏览器的支持情况各异。
e
和E
。另见本问题。自己试试吧在w3schools.com。
2个解决方案。
使用一个表单验证器(例如使用jQuery验证插件)。
在输入字段的onblur(即当用户离开该字段时)事件中,用正则表达式做检查。
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>