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