Compatibility problems:
Input problem (because the page is recalculated after ios keyboard rise height) when it loses focus blank space at the bottom of the lower 1.ios
2. Andrews at the keyboard input focus after obtaining rises blocking the input box
solution: insert a jquery script, bind all click and blur event input module
<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>
Note: lose focus event and a click event when ios conflict at multiple input switching, resulting in the sinking of the page will cause abnormal (ie, rolling in the end part) when the keyboard is raised, it increases the focus traversal input whether the judgment.
Reproduced in: https: //www.jianshu.com/p/4dc7973d4ac8