工作第一个项目遇到的问题及解决

来源：互联网发布：linux 命令知乎编辑：程序博客网时间：2024/05/10 16:25
1、移动端输入验证码，实现四个输入框，在输完第一个时，焦点跳到第二个： - 用focus()实现，苹果不行 - 用JQ模拟事件：triggle(‘click’).focus()；安卓可以，同事苹果6不行 - 自己解决：将四个显示输入的内容的input框正常排列（此为显示框），上面覆盖一个背景透明的输入框（此为输入框）；每次输入判断是删除键还是数字键[正则判断]；循环将输入框的字符串显示在显示框中；代码如下： - /*连续切换输入框输入验证码*/   <input type="text" class="input-check-num" maxlength="4"><input type="text"  class="input-num input-num-one" maxlength="1"><input type="text"  class="input-num input-num-two" maxlength="1"><input type="text"  class="input-num input-num-three" maxlength="1"><input type="text"  class="input-num input-num-four" maxlength="1"><script>$(function(){var oIndexUp=0;            var oChcekLnegth=0;            var re=/[0-9]/;            $('#attach_form .input-check-num').on('keyup',function(e){                inputNum();                var checkNum='';                for(var i=0;i<4;i++){                    if($('#attach_form .input-num:eq('+i+')').val()==''){                        checkNum='';                        return false                    }else {                        checkNum+=$('#attach_form .input-num:eq('+i+')').val();                    }                }                $('#attach_form .checkNum').val(checkNum);                $('#attach_form').submit();             });              $('#attach_form .input-check-num').on('keydown',function(e){                inputNum();            })            function inputNum(){                var oBj=$('#attach_form .input-check-num');                var oValue=oBj.val();                var nowInputNum=oValue[oValue.length-1];                if(oChcekLnegth>oValue.length){                    //删除数据                    for(var i=oValue.length;i<4;i++){                        $('#attach_form .input-num:eq('+i+')').removeClass('active').val('');                    }                    $('#attach_form .input-num:eq('+oValue.length+')').addClass('active');                }else {                    //输入数据                    if(re.test(nowInputNum)){                        for(var i=0;i<oValue.length;i++){                            $('#attach_form .input-num:eq('+i+')').removeClass('active').val(oValue[i]);                        }                        $('#attach_form .input-num:eq('+(i-1)+')').addClass('active');                    }else {                        var oNewValue=oValue.substring(0,oChcekLnegth);                        $(this).val(oNewValue)                    }                }                oChcekLnegth=oBj.val().length;                if(oValue.length==0){                    oBj.css('color','#000000');                }else {                    oBj.css('color','transparent');                }            }     })</script>

2、页面计时器，在锁屏时，会关闭，导致时间显示不准确： - 目前的解决办法时隔10s，发送一次ajax请求，向服务器拿时间，性能感觉不太好3、移动端苹果时间会对按钮设置默认样式，得在公共样式中去掉button, html input[type=button], input[type=reset], input[type=submit]{cursor: pointer;    -webkit-appearance: button;}4、移动端手机划屏不顺畅，可在body加入：-webkit-overflow-scrolling: touch;5、由于touch时间和click事件有时间差，会产生点击穿透，目前我的解决方法是：- 加入蒙层- 将下面元素的click时间 加入return false，并且在touch是，移除click事件6、移动端keframe动画失效了，百度解释是：translateZ()使keframe失效,得使用translate3d()；测试了下，还是不行7、移动页面输入框问题，在输入时候，软键盘会弹出覆盖输入框，可以使用tranform上移一下8、调用摄像头和相册选择头像：- 微信自带接口- <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">据说要看手机，我找同事试了下，大部分都可以- 我用的mui框架，http://www.html5plus.org/doc/h5p.html这里可以调用6、移动端keframe动画失效了，百度解释是：translateZ()使keframe失效,得使用translate3d()；测试了下，还是不行7、移动页面输入框问题，在输入时候，软键盘会弹出覆盖输入框，可以使用tranform上移一下8、调用摄像头和相册选择头像：- 微信自带接口- <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">据说要看手机，我找同事试了下，大部分都可以- 我用的mui框架，http://www.html5plus.org/doc/h5p.html这里可以调用
0 0