js控制ios端的input/textarea元素失去焦點時隱藏鍵盤

標籤：text   ios端   textarea   select   cli   set   targe   元素   eve   

同事在測試產品時發現這樣一個：“某些頁面擊完input框，在點空白處時，iOS裝置的鍵盤不能隱藏並且焦點也不會失去”

帶著這個問題我進行了測試，發現在安卓的裝置上並沒有這種問題出現。

於是寫js進行測試給document添加一個click事件，發現了問題的原因：

安卓是可以觸發click事件的，而iPhone不會觸發。

也就是說在iOS裝置下你點擊空白的document處input並不能失去焦點。

解決辦法：

既然click不能觸發iPhone的事件，那就需要找觸屏事件來觸發一次：

objBlurFun("input");

//如果不是當前觸摸點不在input上,那麼都失去焦點function objBlurFun(sDom,time){    var time = time||300;     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){       var obj = document.querySelectorAll(sDom);       for(var i=0;i<obj.length;i++){           objBlur(obj[i],time);       }    }}    // 元素失去焦點隱藏鍵盤function objBlur(sdom,time){    var time = time||300;     if(sdom){        sdom.addEventListener("focus", function(){                document.addEventListener("touchend", docTouchend,false);        },false);                 }else{         throw new Error("objBlur()沒有找到元素");     }     var docTouchend = function(event){        if(event.target!= sdom){            setTimeout(function(){                 sdom.blur();                document.removeEventListener(‘touchend‘, docTouchend,false);            },time);        }     };    }

 

js控制ios端的input/textarea元素失去焦點時隱藏鍵盤