问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

控制input输入,只能输入数字小数点后最多保留2位?

头像
yanggb
    47238
    最近做input输入的时候,需求是只能让用户输入数字和小数点后最多能输入两位。

开始的做法是监听keydown事件,获取keycode,这样控制用户只能输入数字,但是后来发现安卓手机
在微信浏览器里keycode获取失败了,keycode始终是0。

请教一下大家还有没有什么好点的办法能实现这个需求。

    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

    后来我做了一个keyup事件来,每次事件触发就检查是否符合格式要求,代码如下:
    $("#money").keyup(function(){

                    var reg = /^\d+\.?(\d{1,2})?$/;
                while (!reg.test($(this).val()) && $(this).val() != "") {
                    $(this).val(checkStr($(this).val()));
                }
            });

            //检查是否符合金额格式:只能输入数字且最多保留小数点后两位
            function checkStr(str) {
                str = str.substring(0,str.length-1);
                return str;
            }

    但是我这样做有一个坏处就是,假如我之前输入22222这样是符合输入格式的,但是如果我在中间加入一个非法字符就会将后面的全部删掉,例如我输入222a22这样,就会变成222这样.

    javascripthtml
    阅读 14.5k
    5 个回答
    得票最新
    头像
    macintosh
      232148

      移动开发我不太了解，但是实时校验输入值的话，我一般都是用onchange或者focus，在输入框失去焦点之后立即做判断，见MDN.
      这里有个例子。

      头像
      七橘子
        63831630

        首先，楼主的正则有点小问题，reg.test("22.");//output true 正常情况下这种输入方式是不对的吧；稍微改下var reg = /^d+?(.d{1,2})?$/;，把点和小数点后面的数字绑在一起，当有点的时候，后面应该是有数字的。

        鉴于楼主想要的结果，我的思考思路是：使用正则判断的时候，如果输入格式是对的，则提交，否则返回错误。使用keyup事件的时候，最好设置一个最大长度，否则，当你一直往输入框输入值的时候，会遇到浏览器崩溃的情况，这个你可以测试一下。

        头像
        church
          3.6k1317
          $('#money').blur(function() {
    var money = $(this).val() - 0.0;
    $(this).val(money.toFixed(2));
});
          头像
          suuaa
            1495

            首先你正则表达式有问题你的正则可以匹配到123.这种格式;建议改成/^d+(.d{1,2})?$/
            然后你这里使用while有问题会把非数字字符以后的字符全部删除；可以使用replace(/1+/g,"")先将字符里面非0-9和.的字符全部过滤掉，然后再检查数字格式.但是这里还是会出现问题，当用户输入123.1.2.3这种情况等等

            所以建议 input type="number" 来呼起移动端的数字键盘(提升体验和限制输入)，然后不要帮用户过多的过滤矫正输入(既然都输入了错误的字符与格式那么矫正后的数据也未必是用户想输入的)，但是基本的限制输入长度和小数点位数还是可以有的。但是在提交数据时一定要检查数据格式是否正确，不正确的数据提醒用户

            1. 0-9. ↩
            头像
            SAMPAN
              81941319

              今天自己有需求，所以参考后弄了一个pc的。
              现在还有一个bug就是在小数点后面多选的时候没有办法输入，当然还有兼容性的处理。

              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
<body>
    这是测试地址
    <input type="text" onkeydown="inputFilter.filter(event)" value='9.93'>
    <hr>
    
    <script>

        var inputFilter = {

            keycode : [8, 9,12,13,35,36,37,38,39,40,46], // backspace tab clear enter end home 上 下 左 右 delete,

            reg : /^(\d+)(\.\d{0,1})?$/, //内容检测表达式,之所以最多为1。是因为值为keydown获得的改变前的值，输入小数点第三个数字的时候，获得是没改变的前两位。而正则判断的为1位，因此不能通过。若2两位改变为1位的时候，虽然正则没有过，但是因为此刻将要执行预设的删除操作，所以还是继续执行。

            getPositionForInput : function (inputEle) { //获取光标位置

                inputEle = inputEle || document.querySelectorAll('input')[0];
                var CaretPos = 0; 
                if (document.selection) { // IE Support 
                    inputEle.focus(); 
                    var Sel = document.selection.createRange(); 
                    Sel.moveStart('character', -inputEle.value.length); 
                    CaretPos = Sel.text.length; 
                }else if(inputEle.selectionStart || inputEle.selectionStart == '0'){// Firefox support 
                    CaretPos = inputEle.selectionStart; 
                } 
                return (CaretPos); 

            },

            filter : function (e, ele) { //e 为鼠标键盘对象, ele 为input的dom对象
                var ev=e || window.event;
                var self = this;
                var val= (ele && ele.value) || document.querySelectorAll('input')[0].value;
                var mousePosition = self.getPositionForInput();
                var pointPostion = val.indexOf('.');
                if(!self.reg.test(val)){
                    //如果不是按预设的键 并且点的位置在鼠标的位置前 则不能操作
                    if (self.keycode.indexOf(ev.keyCode) == -1 &&  pointPostion < mousePosition) {
                        ev.preventDefault();
                        window.event.returnValue=false;
                        return false;
                    }
                    
                }
            }


        }


    </script>
</body>
</html>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题