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