点击两次后,在iOS上不能键入到HTML的输入字段(Can't type into html

2019-07-03 10:28发布

我遇到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,其中一人将侦听到它的文档,它打破了另一个内嵌的输入字段太多。

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

任何想法,为什么会出现这种情况? 要不怎么有全球自定义事件处理程序到位触摸事件不打破iOS上的投入?

Answer 1:

这里有一个解决方法。 将焦点设置窗口,然后回到节点,在超时:

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


Answer 2:

特里的回答的一个变化工作围绕这个移动Safari浏览器的bug(!!!)在我的情况。 在这里,“#INPUT”,这是代码的iframe页面上:

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

该漏洞触发多种方式,但“的keydown”来通过可靠。 这使得接下来的“按键”到达为好。



Answer 3:

jQuery Mobile的1.2.0应该是你所需要的

证明! 勾选框之前:

勾选框后:



文章来源: Can't type into html input fields on iOS after clicking twice