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);
     }
 }

}

转载于:https://www.cnblogs.com/sgqwjr/p/10207629.html