文本框仅可接收decimal

最新推荐文章于 2021-06-03 15:33:12 发布

weixin_30550271

最新推荐文章于 2021-06-03 15:33:12 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/insus/p/6500195.html

本文介绍如何使用jQuery控制HTML文本框仅允许输入数字或特定格式的数字（如带有小数点）。通过示例代码展示了如何阻止非法字符输入，并保持用户交互体验。

文本框html如下：

<div><label class="label">价格:</label><input id="TextPrice" type="text" name="Price" /></div>

Source Code

jQuery:

 $("#TextPrice").on("input", function (evt) {
            var self = $(this);
            self.val(self.val().replace(/[^0-9\.]/g, ''));
            if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57)) {
                evt.preventDefault();
            }
        });

View Code

如果此文本框只接受整数呢，可以把jQuery稍修改一下：

$("#TextPrice").on("input", function (evt) {
            var self = $(this);
            self.val(self.val().replace(/[^\d].+/, ""));
            if ((evt.which < 48 || evt.which > 57)) {
                evt.preventDefault();
            }
        });

Source Code

结果：