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

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