有一个快速的方法来设置HTML文本输入(<input 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);"/ >
其他回答
你可以附加到key down事件,然后根据你需要过滤键,例如:
<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);" type="text">
实际的JavaScript处理程序是:
function validateNUM(e,field)
{
var key = getKeyEvent(e)
if (specialKey(key)) return true;
if ((key >= 48 && key <= 57) || (key == 46)){
if (key != 46)
return true;
else{
if (field.value.search(/\./) == -1 && field.value.length > 0)
return true;
else
return false;
}
}
function getKeyEvent(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
keynum = e.keyCode
else if(e.which) // Netscape/Firefox/Opera
keynum = e.which
return keynum;
}
你也可以比较输入值(默认情况下被视为字符串)和它本身被强制为数字,比如:
if(event.target.value == event.target.value * 1) {
// returns true if input value is numeric string
}
然而,你需要绑定到事件,如keyup等。
我选择使用这里提到的两个答案的组合,即。
<输入类型=“编号”/>
and
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);”>
还有一个例子,对我来说很有用:
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" />
下面是一个jsFiddle的例子
更安全的方法是检查输入的值,而不是劫持按键并试图过滤keycode。
通过这种方式,用户可以自由使用键盘箭头、修改键、退格键、删除键、使用非标准键键、使用鼠标粘贴、使用拖放文本,甚至使用辅助输入。
下面的脚本允许正数和负数
1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed
var input = document.getElementById('number'); 输入。Onkeyup =输入。onchange = enforcfloat; //强制只能输入浮点数 函数enforceFloat() { Var valid = /^\-?\d+\. d*$|^\-?[\d]*$/; var = / \ \ d + \数量。* | \ \ d - (\ d) * | (\ d) + \ \ [d]。* | (\ d) + /; If (!valid.test(this.value)) { Var n = this.value.match(number); 这一点。Value = n ?N[0]:“; } } <input id="number" value="-3.1415" placeholder="Type a number" autofocus> .
编辑:我删除了我的旧答案,因为我认为它现在已经过时了。
推荐文章
- 如何将两个字符串相加,就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- event.preventDefault()函数在IE中无法工作
- indexOf()和search()的区别是什么?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组
- src和dist文件夹的作用是什么?