1. 程式人生 > >iso移動端input的bug解決(vue)

iso移動端input的bug解決(vue)

iso中input很奇怪,點選空白地方,鍵盤也不會消失,影響頁面中其他功能

解決辦法: 點選的元素不是input或者textarea,那麼就讓上一個獲得焦點的輸入框失去焦點。

涉及的程式碼:

<input type="tel" @focus="isohide($event)">

var iso = false;
var nowinput = null;
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
if(browser.versions.ios){
iso = true;
}
function docTouchend (event){
if (!(event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA')) {
setTimeout(function(){
nowinput.blur();
window.scrollBy(0,10); // 解決失去焦點後,蘋果的頁面視窗可能卡住,讓滾動條滾動一點即可。
document.removeEventListener('touchend', docTouchend,false);
}, 300);
}
};

vue中methods
methods: {
 isohide: function (e) {
if (iso) {
nowinput = e.target;
document.addEventListener("touchend", docTouchend, false);
}
}
}