点击两次后，不能在iOS上输入HTML输入字段 [英] Can't type into html input fields on iOS after clicking twice

问题描述

我在iOS上遇到一个问题，我已经提出了一个小提琴：

http://jsfiddle.net/Hk56Q/

如果事件侦听器被添加到文档中进行任何触摸事件（touchstart / touchmove / touchend），如下所示：

  function onTouch（e）{}; 
 document.addEventListener（'touchstart'，onTouch，false）; 
  

导致输入字段在iOS上具有以下行为：

• 首次触摸：输入获得焦点，用户可以正确键入


• 后续触发（重点放在字段已在地点）：打字不再工作

我在iOS 5,5.1和6上遇到并测试了这个问题， iPad和iPhone（模拟器和实际设备）。

唯一的修复似乎是删除事件侦听器以恢复输入字段的正确行为（或实际上不会添加所有听众）：

  document.removeEventListener（'touchstart'，onTouch）; 
  

我也注意到，如果页面上有多个iframe，其中一个将侦听器添加到它的文件，它也打破了其他iframe的输入字段。

小提琴在我的Android手机上正常运行。

任何想法为什么会这样发生？或者如何让触摸事件的全球定制事件处理程序在iOS上不会打破输入？

解决方案

这是一个解决方法。将焦点设置到窗口，然后返回到节点，超时时间：

  function fixIpadTouch（node）{
 node.ontouchend = function（e）{
 if（document.activeElement === node）{
 window.focus（）; 
 setTimeout（function（）{
 node.focus（）; 
}，0）; 
} 
} 
} 
  

I'm experiencing an issue on iOS and I've put up a fiddle for it:

http://jsfiddle.net/Hk56Q/

If an event listener is added to the document for any touch event (touchstart/touchmove/touchend), like so:

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

that results in the input fields having the following behaviour on iOS:

• First touch: the input gets focus and the user can type correctly into it
• Subsequent touches (with focus on the field already in place): typing doesn't work anymore

I'm experiencing and testing this issue on iOS 5, 5.1 and 6, on both iPad and iPhone (simulators and actual devices).

The only fix seems to be removing the event listener to restore the correct behaviour of the input fields (or to actually never add the listener at all):

document.removeEventListener( 'touchstart', onTouch);

I also noticed that if there are multiple iframes on the page, and one of them adds the listener to its document, it breaks the other iframe's input fields too.

The fiddle behaves correctly on my Android phone.

Any ideas why is this happening? Or how to have global custom event handlers for touch events in place that don't break the inputs on iOS?

解决方案

Here's a workaround. Set the focus to the window and then back to the node, in a timeout:

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

这篇关于点击两次后，不能在iOS上输入HTML输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！