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設置。

  view sourceprint?

  01.//判斷是否爲蘋果

  02.var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;

  03. 

  04.// 元素失去焦點隱藏iphone的軟鍵盤

  05.function objBlur(id,time){

  06.if(typeof id != 'string') throw new Error('objBlur()參數錯誤');

  07.var obj = document.getElementById(id),

  08.time = time || 300,

  09.docTouchend = function(event){

  10.if(event.target!= obj){

  11.setTimeout(function(){

  12.obj.blur();

  13.document.removeEventListener('touchend', docTouchend,false);

  14.},time);

  15.}

  16.};

  17.if(obj){

  18.obj.addEventListener('focus', function(){

  19.document.addEventListener('touchend', docTouchend,false);

  20.},false);

  21.}else{

  22.throw new Error('objBlur()沒有找到元素');

  23.}

  24.}

  25. 

  26.if(isIPHONE){

  27.var input = new objBlur('input');

  28.input=null;

  29.}

// ========== 我的添加 ==============

如果頁面中多個的輸入框，都得處理這個問題，我是這麼幹的：

function fixedInputBlur () {
    var beforeIpt=null;
    $("input").on("focus", function (e) {
        beforeIpt=this;
    });
    $(document).on("tap", function (e) {
        if(e.target.nodeName.toLowerCase()!="input") {
            if(beforeIpt) {
                beforeIpt.blur();
                beforeIpt=null;
            }
            // a標籤也能獲取焦點，但是用代碼模擬點擊事件卻不能觸發鍵盤隱藏
        }
    });
}