在文本字段中只允许整数或浮点数 jQuery

当开发表单时，可能需要在文本字段中只允许输入数字，特别是整数或浮点数。在这种情况下，使用jQuery可以轻松实现这一功能。

方法1：使用正则表达式

可以使用jQuery .keyup()和正则表达式来实现这个功能。在文本框每次按键松开时，检查输入是否为数字。

$(document).ready(function(){
    $('#myNumberField').keyup(function(){
        var val = $(this).val();
        var pattern = /^\d*\.?\d*$/; // 正则表达式：只允许输入数字
        if (!pattern.test(val)) {
            $(this).val('');
        }
    });
});

首先，使用$()函数选择正确的文本字段，然后使用keyup()方法。在每次松开按键时，获取当前文本框中的值，并检查它是否匹配正则表达式。如果不匹配，则将文本框内容设置为空。

此方法存在一个问题：允许输入多个小数点。例如：输入"1.2.3"。要解决这个问题，可以修改正则表达式。

var pattern = /^[0-9]\d*(\.\d+)?$/; // 正则表达式：只允许整数|浮点数

这会强制只允许一个小数点。但是，它不允许在开头输入小数点，例如".1"。可以使用以下正则表达式解决这个问题。

var pattern = /^-?\d*(\.\d+)?$/; // 正则表达式：只允许整数|浮点数，包括负数

方法2：使用input事件

另一种方法是使用jQuery .on()方法和input事件。input事件在值更改时触发。

$(document).ready(function(){
    $('#myNumberField').on('input', function(){
        $(this).val(function(i, val){
            return val.replace(/[^\d.]/g, ''); // 去除非数字和小数点字符
        });
    });
});

这里的.on()方法订阅了input事件。当文本框中的值更改时，它会调用回调函数。在回调函数中，使用replace()方法将非数字和小数点字符替换为空字符串''。

总结

使用jquery可以很容易地从文本字段中只允许输入数字。以上介绍的两种方法都不是完美的，每种方法都有其自己的优点和缺点。当选择哪种方法时，应根据具体情况来决定。

参考资料

• jQuery documentation
• Regexr - Learn Regular Expressions