jquery教程限制文本框只能输入数字和小数点示例分享


当然,我可以为你提供一个使用jQuery来实现文本框只能输入数字和小数点的示例代码。这个示例将会通过监听文本框的`keypress`事件来过滤掉非法的字符输入。


$(document).ready(function() {
    // 假设文本框的ID是"numberInput"
    $("#numberInput").keypress(function(event) {
        // 获取当前按键的ASCII码
        var key = event.which || event.keyCode;

        // 检查是否是数字键、退格键、左箭头、右箭头、删除键
        if (key >= 48 && key <= 57 || key == 8 || key == 9 || key == 37 || key == 39 || key == 46) {
            // 如果是小数点,并且文本框内已经存在小数点,则阻止输入
            if (key == 46 && $(this).val().indexOf('.') !== -1) {
                event.preventDefault();
            }

            // 允许按键操作
            return true;
        } else {
            // 阻止非法字符的输入
            event.preventDefault();
        }
    });

    // 处理粘贴事件,确保粘贴的内容也是数字和小数点
    $("#numberInput").on("paste", function(event) {
        var clipboardData, pastedData;

        // 阻止默认粘贴行为
        event.preventDefault();

        // 获取粘贴板上的数据
        clipboardData = event.originalEvent.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData('Text');

        // 使用正则表达式检查粘贴的数据是否只包含数字和小数点
        if (/^\d*\.?\d+$/.test(pastedData)) {
            // 替换文本框当前内容
            $(this).val(pastedData);
        }
    });
});

这段代码做了两件事:

1. 通过`keypress`事件监听文本框的按键操作,确保只能输入数字、小数点、退格键、左右箭头键和删除键。同时,防止用户多次输入小数点。

2. 通过`paste`事件监听粘贴操作,使用正则表达式检查粘贴的内容是否只包含数字和小数点,如果是,则替换文本框当前的内容。

请确保在HTML中你的文本框有正确的ID,例如:


<input type="text" id="numberInput" />

这样,当页面加载完成后,jQuery将自动应用上述的输入限制。