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

同事在製作觸屏頁面的時候收到產品這樣一個需求：“我們的頁面為什麼點擊完textarea框，在點空白處時，iphone的鍵盤不能隱藏？”

我們就這個問題進行了測試，確實沒有隱藏。看了看其它網站的頁面，也是有的能隱藏有的不能隱藏。

IPHONE系統在點擊document時textarea為什麼沒有失去焦點？

同樣的問題我又在Android系統上測試了一下可以自動隱藏，只有IPHONE有這問題。

於是上網搜了搜相關的方法顯示隱藏鍵盤的方法都是基於APP的而沒有js的，看來需要自己動手解決了。

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

Android是可以觸發click事件的，而IPHONE不會觸發。

也就是說在IPHONE下你點擊空白的document處textarea並不能失去焦點。

使用觸屏事件

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

ontouchstart
ontouchmove
ontouchend
ontouchcancel

最後我選擇用ontouchend，手指離開螢幕時觸發。

想過的辦法1：點擊A標籤可以讓textarea失去焦點

在textarea獲得焦點時，點擊A標籤可以讓textarea失去焦點，隱藏IPHONE的鍵盤。

實現的思路就是：

1.textarea在獲得焦點時

2.當ontouchend移動到document空白處時建立一個A標籤，類比A標籤的點擊事件

3.textarea失去焦點，隱藏IPHONE的鍵盤

這個方法想出來簡單實驗了一下，感覺太蛋疼了，直接pass掉。。。

想過的辦法2：讓textarea主動失去焦點

1.textarea獲得焦點時

2.給document添加一個ontouchend事件，判斷當前點擊的元素是不是textarea本身 如果不是 textarea會失去焦點

3.document移除ontouchend事件

覺得還是這個方法靠譜，最終按照這個思路去解決。

最終方法

1.由於是在觸屏上使用所以沒有用到IE的二級事件。

2.做了一個判斷，只在IPHONE上觸發。

3.當時做完了同事說方法執行的太快了，客戶來不及反應鍵盤就隱藏了，於是添加了一個time參數用做settimeout設定。

//判斷是否為蘋果var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1;// 元素失去焦點隱藏iphone的軟鍵盤function objBlur(id,time){    if(typeof id != "string") throw new Error("objBlur()參數錯誤");    var obj = document.getElementById(id),        time = time  300,        docTouchend = function(event){            if(event.target!= obj){                setTimeout(function(){                     obj.blur();                    document.removeEventListener("touchend", docTouchend,false);                },time);            }        };    if(obj){        obj.addEventListener("focus", function(){            document.addEventListener("touchend", docTouchend,false);        },false);    }else{        throw new Error("objBlur()沒有找到元素");    }}if(isIPHONE){    var input = new objBlur("input");    input=null;}