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这里可以调用