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

  
  

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