1. 程式人生 > >js控制ios端的input/textarea元素失去焦點時隱藏鍵盤

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

out ios cas browser 焦點 agent 解決辦法 col area

同事在測試產品時發現這樣一個:“某些頁面擊完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元素失去焦點時隱藏鍵盤