input输入限制,只接受数字

最新推荐文章于 2024-07-03 11:46:28 发布

weixin_30242907

最新推荐文章于 2024-07-03 11:46:28 发布

阅读量435

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cnjs/p/5012127.html

版权

一需求

限制input的输入,只接收数字和小数点
限制输入位数

二分析

个人观点:这是一个坑爹的需求,限制输入有很多bug,而且用户体验也很差,监听keypress事件会浪费很多性能
实现原理:虽然很坑爹,但是还是要做一下的,实现原理就是通过键盘的监听,阻止不必要的输入
实现方式:jQuery插件方式,现在工作中基本离不开jQuery,虽然有人说这很不好,但是我必须的用啊,因为我很low

三代码和注释

基本上注释已经很全面了
基本上逻辑还是有点混乱的,只供参考,不喜欢的需求也就能搞成这样了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test input</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <script type="text/javascript">
    ;(function($){
        $.fn.extend({
            numberInput:function(zs,xs){
                //取节点,并过滤出 text和number
                node = $(this).filter("input[type='text'],input[type='number']");
                //检测节点,如果没有合适的节点,啥也不干
                if(!node.length) return;

                //整数部分默认值为1 ,如果输入0也会变成1
                zs = zs || 1;

                //小数位默认值是0
                xs = xs || 0;

                //绑定事件,绑定之前先解绑一下,免得重复绑定
                node.off("keypress.sjsplugin")


                //有小数部分和没有小数部分,绑定不同的函数,提高效能
                if(xs != 0){
                    node.on("keypress.sjsplugin",function(e) {
                        var keyCode = e.keyCode;  //保存keyCode
                        //获取当前输入状态
                        var text = $(this).val();
                        //只接收数字和小数点
                        if(!((keyCode>47 && keyCode<58) || keyCode == 46)){
                            e.preventDefault(); 
                        }

                        //匹配后只接受数字
                        var intParten = new RegExp("^\\d{1,"+ zs +"}\\.","i");
                        //匹配后只接受小数点
                        var intParten1 = new RegExp("^(\\d{"+ zs +"})|(0)$","i");
                        //匹配后结束输入
                        var numberParten = new RegExp("^\\d{1,"+ zs +"}\\.\\d{"+ xs +"}$","i");
                        
                        //没有输入的时候,或者已经输入了数字和小数点,则不能再输入小数点
                        if((text.length == 0 || intParten.test(text))&& keyCode == 46){
                            e.preventDefault();
                        }
                        //如果输入了足够多的数字或者第一位输入了0 则只能输入小数点
                        if (intParten1.test(text) && (keyCode != 46)) {
                            e.preventDefault();
                        }
                        //如果输入已经符合 XX.XX 的格式,则拒绝所有输入
                        if (numberParten.test(text)){
                            e.preventDefault();
                        }
                        
                    });
                }else{
                    node.on("keypress.sjsplugin",function(e) {
                        var keyCode = e.keyCode;  //保存keyCode
                        //获取当前输入状态
                        var text = $(this).val(); 
                        //只接收数字,不接收小数点
                        if(!(keyCode>47 && keyCode<58)){
                            e.preventDefault(); 
                        }
                        //没有小数部分
                        var intParten = new RegExp("^\\d{"+ zs +"}$","i"); 
                        //如果输入已经符合格式,则拒绝所有输入
                        if (intParten.test(text)){
                            e.preventDefault();
                        }
                    });
                }
            }
        });

    })(jQuery);
    
    //使用方法
    $(function(){
        $(".didgit_input").numberInput(2,3);    //起作用
    });
    </script>
</head>
<body>
    <input type="text" class="didgit_input">
    <input type="number" class="didgit_input">
    <input type="password" class="didgit_input">
</body>
</html>

后记

使用过程中发现 keypress 在手机端行为诡异,在QQ手机浏览器中无法使用,所以如果你想在手机端使用,需要考虑别的事件来代替 keypress

转载于:https://www.cnblogs.com/cnjs/p/5012127.html

weixin_30242907

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input输入限制,只接受数字

一需求限制input的输入,只接收数字和小数点限制输入位数二分析个人观点:这是一个坑爹的需求,限制输入有很多bug,而且用户体验也很差,监听keypress事件会浪费很多性能实现原理:虽然很坑爹,但是还是要做一下的,实现原理就是通过键盘的监听,阻止不必要的输入实现方式:jQuery插件方式,现在工作中基本离不开jQuery,虽然有人说这很不好,但是我必须的用啊,因为我很lo...
复制链接

扫一扫