Question

我在iPad上的Safari遇到了严重的问题。新的contenteditable功能似乎不适用于touchmove事件！代码：

 ...
 <script>
function doNothing(event) { return; }

function initIFrame() {
    var iframe=document.getElementById("iframeedit");
    iframe.contentWindow.document.designMode="on";      
    iframe.contentWindow.document.addEventListener("touchmove", doNothing, true);
}
</script>
</head>
<body onload="initIFrame()">
<iframe style="width:500ppx;height:200px" src="content.html" id="iframeedit"></iframe>
...

通过在文档的某处添加touchmove，在触摸移动后无法再编辑可编辑内容（按住手指以获取放大镜）。可以设置光标，但不允许通过屏幕键盘输入。

测试脚本（适用于iPad + iOS5）： http://flyingdog.biz/tests/ipad/test2.html

另一个正在运行的测试脚本： http://flyingdog.biz/tests/ipad/test1.html

正如你在其他脚本中看到的那样，我在iFrame前放了几行文字 - 非常奇怪！我正在寻找另一个/更好的解决方法或者我做错了什么？如果没有touchmove活动，它可以正常工作，但我需要这样才能获得良好的编辑体验。

Answer 1

我发现了这个错误的解决方法：似乎iframe文档在触摸事件后失去了焦点，特别是当出现复制和粘贴菜单时。要解决此错误，请向iframe文档添加keydown事件处理程序，并将焦点重置为文档：

var iframeDoc = $(iframe.contentWindow.document);
iframeDoc.keydown(function(event) {
    iframe.contentWindow.focus();
});

这主要是为我修复了这个bug。只有当用户键入速度非常快时（例如在连接的蓝牙键盘上），才会发生某些击键丢失，因为iPad上的javascript keydown处理程序执行有点延迟。

Safari / iOS 5 / iPad中的touchmove事件被禁用了 - 任何解决方法？

1 个答案: