Safari/iOS5/iPad 中的 touchmove 事件禁用 contenteditable - 有解决方法吗？

发布于 2024-12-13 15:36:10 字数 1028 浏览 2 评论 0原文

我在 iPad 上的 Safari 浏览器中遇到严重问题。新的内容可编辑功能似乎不适用于 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，在 touchmove 后将无法再编辑可编辑内容（按住手指以获得放大镜）。可以设置光标，但不再允许使用屏幕键盘打字。

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

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

如您所见在另一个脚本中，我在 iFrame 前面放置了几行文本 - 非常奇怪！我正在寻找另一种/更好的解决方法，还是我做错了什么？如果没有 touchmove 事件，它就可以工作，但我需要它才能获得良好的编辑体验。

原文

I have a serious problem in Safari on iPad. The new contenteditable features doesn't seem to work with touchmove event!
code:

 ...
 <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>
...

By adding touchmove somewhere to the document the editable content can not be edited anymore after a touchmove (hold finger down to get the magnifier). The cursor can be set but typing by onscreen keyboard is not allowed anymore.

Test script (for iPad + iOS5):
http://flyingdog.biz/tests/ipad/test2.html

Another test script which is working:
http://flyingdog.biz/tests/ipad/test1.html

As you can see in that other script I put a few lines of text in front of iFrame - very strange! I am looking for another/better workaround or did I have done something wrong? Without the touchmove event it is working but I need this for a good editing experience.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余厌 2024-12-20 15:36:10

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

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

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

I found a workaround for this bug: It seems that the iframe document looses the focus after a touch event, especially when the copy&paste menu appears. To workaround this bug add a keydown event handler to the iframe-document and reset the focus to the document:

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

This fixes the bug mostly for me. Only if the user types very fast (e.g. on a connected bluetooth keyboard) it can happen that some keystrokes are lost, because the javascript keydown handler execution is a little bit delayed on the iPad.

回复收藏 0 原文

~没有更多了~