互換性の問題:
入力された問題(ページがIOSキーボード上昇高さの後に再計算されるため)、それは低い1.iosの下部に空白をフォーカスを失ったとき
、入力ボックスブロッキング上昇を取得した後、キーボード入力フォーカスで2アンドリュース
溶液:jqueryの挿入スクリプト、すべてのクリックを結合して、イベント入力モジュールをぼかします
<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競合が(端部に転がり、すなわち)に異常が発生しますページの沈没で、その結果、切り替え時のフォーカスイベントとクリックイベントを失い、それが判断するかどうかフォーカストラバーサル入力が増加します。
ます。https://www.jianshu.com/p/4dc7973d4ac8で再現