2012-10-29 65 views
11

我遇到iOS上的問題後,iOS上鍵入到HTML的輸入字段,我已經提出了一個搗鼓它:不能點擊兩次

http://jsfiddle.net/Hk56Q/

如果事件偵聽器添加用於任何觸摸事件的文檔(touchstart/touchmove/touchend),像這樣:

function onTouch(e){}; 
document.addEventListener('touchstart', onTouch, false); 

導致具有在iOS以下行爲輸入字段:

  • 首先觸摸:輸入獲得焦點,並且用戶可以(已經到位的領域爲重點)正確輸入內容
  • 後續亮點:打字不工作了

我遇到並在iPad和iPhone(模擬器和實際設備)上的iOS 5,5.1和6上測試此問題。

唯一的解決方法似乎被刪除事件偵聽器來恢復輸入字段的正確的行爲(或實際絕不添加監聽器在所有):

document.removeEventListener('touchstart', onTouch); 

我也注意到,如果有多個頁面上的iframe,其中一個將偵聽器添加到其文檔,它也打破了其他iframe的輸入字段。

小提琴在我的Android手機上運行正常。

任何想法爲什麼會發生這種情況?或者如何爲觸摸事件設置全球自定義事件處理程序,而不會中斷iOS上的輸入?

+1

我們已經遇到了FastClick這個問題,它正在[追蹤公開(https://github.com/ftlabs/fastclick/issues/51)。我還提交了一份[bug報告](http://openradar.appspot.com/radar?id=2527401)與蘋果部分基於您的測試案例。 –

+0

嘿,是的,這絕對是一個Safari iOS錯誤,很好的報告它。我仍然想知道這個問題這麼久沒有被人注意...... – BFil

+0

即使通過放大/縮小來調整iframe窗口的大小,我也遇到了這個錯誤。 –

回答

0

jQuery Mobile 1.2.0應該是你需要的東西

PROVE!勾選框前:

PROVE(before)

勾選框後:

After ticking

9

這裏有一個解決方法。將焦點設置窗口,然後回到節點,在超時:

function fixIpadTouch(node){ 
    node.ontouchend=function(e){ 
     if(document.activeElement===node){ 
      window.focus(); 
      setTimeout(function(){ 
       node.focus(); 
      },0); 
     } 
    } 
} 
+1

我不能相信這沒有更多upvotes。唯一的解決方案就是解決這個問題。你是一個拯救生命的人:-) –

1

特里的回答的一個變化解決此移動Safari瀏覽器的bug(!!!)在我的情況下工作。在這裏,「#INPUT」,這是代碼的iframe頁面上:

var el = $('#input'); 
el.on('keydown', function() { 
    window.focus() 
    el.focus() 
}); 

的錯誤觸發多種方式,但「的keydown」來通過可靠。這使得下一個'按鍵'也會到來。