注意:这是更新的答案。下面的注释指的是一个旧版本,其中充斥着密钥代码。
在 JSFiddle 上尝试一下。
您可以使用以下setInputFilter
函数来过滤文本<input>
的输入值(支持 “复制 + 粘贴”,“拖动 + 拖放”,键盘快捷键,上下文菜单操作,不可键入的键,插入符号位置,不同的键盘布局以及所有浏览器)自 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 演示 。另请注意,您仍然必须执行服务器端验证!
还有一个 jQuery 版本。看到这个答案 。
HTML 5 有一个本机解决方案,其<input type="number">
(请参阅规范 ),但是请注意,浏览器支持有所不同:
step
, min
和max
属性。 e
和E
也看到这个问题 。 在 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="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) )">
这是一个简单的值,它只允许一个小数,但不能再多:
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
还有一个例子,对我来说非常有用:
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
同时附加到按键事件
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
和 HTML:
<input type="input" id="edit1" value="0" size="5" maxlength="5" />
HTML5 具有<input type=number>
,这听起来很适合您。当前,只有 Opera 本身支持它,但是有一个项目具有 JavaScript 实现。
这里的大多数答案都具有使用键事件的弱点 。
许多答案会限制您使用键盘宏进行文本选择,复制 + 粘贴以及更多不良行为的能力,其他答案似乎取决于特定的 jQuery 插件,这些插件会用机枪杀死苍蝇。
无论输入机制(击键,复制 + 粘贴,右键单击复制 + 粘贴,语音转文本等),此简单的解决方案似乎都对我跨平台最有效。所有文本选择键盘宏仍然可以使用,甚至会限制通过脚本设置非数字值的能力。
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
我选择使用这里提到的两个答案的组合,即
<input type="number" />
和
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<input type="text" onkeypress="return isNumberKey(event);">
HTML5 支持正则表达式,因此您可以使用以下命令:
<input id="numbersOnly" pattern="[0-9.]+" type="text">
警告:某些浏览器尚不支持此功能。
的 JavaScript
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
另外,您可以添加逗号,句号和减号(,.-)
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
的 HTML
<input type="text" onkeydown="validateNumber(event);"/ >