兼容问题:
1.ios下input在失去焦点时底部留白的问题(因为ios的键盘升起后页面会重新计算高度)
2.安卓下input在获得焦点后键盘升起挡住了输入框
解决方案:插入一段jquery脚本,绑定所有input组件的click和blur事件
<script>
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
$('input,textarea').on({click: function () {
if(isAndroid) {
var target = this;
setTimeout(function () {
target.scrollIntoViewIfNeeded();
}, 600);
}
},blur:function () {
if(isiOS)
{
setTimeout(()=>{
var inputs = $('input,textarea');
var haveFocus=false;//判断页面是否有input有焦点
inputs.each(function(){//主要解决ios切换input框click事件和blur冲突导致切换下沉
haveFocus=$(this).is(":focus");//遍历得到的每一个jquery对象
if(haveFocus)
{
return false;
}
});
if(!haveFocus)
{
window.scroll(0,0)
}
},300)
}
}});
</script>
/**针对hash单页路由的版本**/
<script>
function inputManage(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
$('input,textarea').on({click: function () {
if(isAndroid) {
var target = this;
setTimeout(function () {
target.scrollIntoViewIfNeeded();
}, 600);
}
},blur:function () {
if(isiOS)
{
setTimeout(()=>{
var inputs = $('input,textarea');
var haveFocus=false;//判断页面是否有input有焦点
inputs.each(function(){//主要解决ios切换input框click事件和blur冲突导致切换下沉
haveFocus=$(this).is(":focus");//遍历得到的每一个jquery对象
if(haveFocus)
{
return false;
}
});
if(!haveFocus)
{
window.scroll(0,0)
}
},300)
}
}});
}
inputManage();//初始化执行一次
window.addEventListener('hashchange',inputManage)//每次hash路由跳转执行一次
</script>
附注:ios下多个input切换时失去焦点事件和click事件会冲突,导致页面会在键盘升起的时候造成异常的下沉(即滚动到底部),所以增加了遍历input有无焦点的判断.
网友评论