2012-10-29 64 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”来通过可靠。这使得下一个'按键'也会到来。