有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?


当前回答

更安全的方法是检查输入的值,而不是劫持按键并试图过滤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> .

编辑:我删除了我的旧答案,因为我认为它现在已经过时了。

其他回答

HTML5有<input type=number>,这听起来很适合你。目前,只有Opera原生支持它,但有一个项目有一个JavaScript实现。

使用这个正则表达式/\D*/g

const phoneHandler = (event: React.ChangeEvent<HTMLInputElement>) =>{
setPhone(event.target.value.replaceAll(/\D*/g, ''));};

jQuery的另一个简单方法:

$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

现在只需将每个输入类设置为Numeric,如下所示:

<input type="text" id="inp2" name="inp2" class='Numeric' />

正则表达式和匹配函数可以很好地处理这种情况。例如,我使用下面的代码来验证图上作为坐标的4个输入框。它运行得相当好。

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}

我用完了这个函数:

onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) return false;"

这在IE和Chrome中工作得很好,我不知道为什么它在firefox中也不工作得很好,这个功能在firefox中阻止了tab键。

对于tab键在firefox中工作很好,添加这个:

onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(event.keyCode != 9) return false;"