前端小知识: jQuery 控制 input 只能输入数字和小数

前端

2023-10-24 00:12:55

在网页开发中，确保用户正确输入是提升用户体验的关键因素之一。特别是当表单需要收集数值信息时，控制用户只能输入有效的数字或小数显得尤为重要。本篇文章将详细展示如何使用jQuery来实现这一功能。

实现原理与步骤

1. 理解需求

目标是在一个文本框内限制用户只能输入整数和浮点数（即小数）。这包括禁止字符、特殊符号以及非数字的任何输入。此外，还需确保用户可以使用键盘上的退格键或删除键来修正错误。

2. 使用jQuery绑定事件

实现这一功能的关键在于监控用户的按键行为并拦截不合法的输入。可以通过监听input元素的keydown或keyup事件，并在这些事件中检查按下的键是否是数字键、小数点或者退格键等有效字符。

3. 编写jQuery代码

以下是一个简单的示例，展示如何使用jQuery实现这一功能：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>限制输入框为数字和小数</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="numberInput" placeholder="请输入数字或小数">

<script>
$(document).ready(function(){
    $("#numberInput").on("keydown", function(event) {
        // 允许退格键、删除键、方向键以及数字小键盘
        if ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
            (event.keyCode == 65 && event.ctrlKey === true) || 
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                return;
        } else {
            // 确保输入的是数字或小数点
            if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
    }).on("keyup", function() {
        // 进一步检查文本内容，确保没有输入非法字符
        this.value = this.value.replace(/[^0-9\.]/g, '');
        if ((this.value).indexOf('.') != -1) {
            var index = (this.value).indexOf('.');
            if ((this.value.length - index - 1) > 2) { // 允许两位小数
                this.value = this.value.substring(0, index + 3);
            }
        }
    });
});
</script>
</body>
</html>