javascript - 发动你的脑筋，来看看移动端键盘存在的bug

问题描述

问 题

样式如上图所示，js逻辑

        $('#keyBox').on('touchend' , 'a' ,function(e){
            var $tar = $(e.target) || $(e.srcElement);
            var curNum = $tar.text();
            var str = $('#inputBox').val();

            //判断支付
            if(curNum=='支付'){
                if($tar.parent().hasClass('disabled')){
                    return;
                }
                toPay();
                return;
            }

            if(curNum == ''){
                if($tar.hasClass('del-btn-icon')){    //判断删除
                    str =  str.slice(0,-1);
                    $('#inputBox').val(str);
                    payOrNot();
                    return;
                }else if($tar.hasClass('put-away-icon')){    //判断隐藏键盘
                    if($(".number-keyboard-wrap").hasClass('keyBoxShow')){
                        $(".number-keyboard-wrap").removeClass('keyBoxShow');
                    }
                    $(".number-keyboard-wrap").addClass('keyBoxHide');
                    return;
                }
            }

            //判断是否含有小数点,防止有些人恶意输入小数点
            if(curNum == '.' && str.indexOf('.') != -1){
                return;
            }
            //判断是不是在小数点前输入了N个0；
            if(curNum != '.' && str == '0'){
                return;
            }
            //默认保存2位小数；
            if(str.slice(str.indexOf('.')).length==3){
                return;
            }

            $('#inputBox').val(str+curNum);
        });

在PC端点击没有问题，但是在手机上，点完0之后再点其他按键会有一点延迟？没找到原因。大家来看看！

解决方案

在键盘的父元素上面绑定一个 click, 然后阻止事件冒泡, 我之前写过一个键盘, 这个链接描述, 也遇见过这个问题, 点击不灵敏。

这篇关于javascript - 发动你的脑筋，来看看移动端键盘存在的bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！