HTML文本输入只允许数字输入
有没有一种快速的方法来设置一个HTML文本输入( <input type=text />
)只允许数字按键(加'。')?
JavaScript (最可靠的)
虽然这很简单,但它不会让您使用组合键和其他不可键入的键。 对于支持类型号和最大长度验证输入的完整JavaScript解决方案,请考虑使用此Polyfill。
带有<!DOCTYPE html>
HTML 5具有原生解决方案:
<input type="number">
请注意,它在某些浏览器中的行为不是标准方式。
尝试使用输入类型=数字来查看HTML5版本。
另请参阅https://github.com/jonstipe/number-polyfill以获得旧版浏览器中的透明支持。
jQuery的
$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl/cmd+A
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+C
(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+X
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
更复杂的验证选项
如果你想做一些其他验证点和片断,这可能会很方便:
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input
但不要忘记,你仍然必须做服务器端验证!
对于AZERTY键盘:
jQuery的
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl+C
(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl+X
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39) ||
//Allow numbers and numbers + shift key
((e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105))) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((!e.shiftKey && (e.keyCode < 48 || e.keyCode > 57)) || (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
使用这个DOM
<input type='text' onkeypress='validate(event)' />
和这个脚本
function validate(evt) {
var theEvent = evt || window.event;
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) )">
链接地址: http://www.djcxy.com/p/15355.html