6

我遇到了我遇到过的最奇怪的错误，而我在这个问题上几乎无能为力。任何对如何调试（或任何聪明的解决方法）有想法的人都会很棒。

问题：

我正在使用 contenteditable 在 Firefox 中制作一个简单的所见即所得编辑器。当我通过 ajax 加载要编辑的文本时出现问题。在加载之前，光标看起来很好（一瞬间），一旦文本加载它就会消失。您仍然可以输入文本，并且光标肯定还在“那里”（状态框显示当前行/列就好了），但是光标不可见并且选择覆盖不出现。

这就是真正奇怪的原因：在任何其他 dom 元素上、firebug 上，甚至在另一个窗口上单击 ANYWHERE 都会使光标返回并表现得像正常一样。事实上，光标出现问题的唯一时间是最开始时，即最初加载页面或刷新时。单击 contentedtiable div 内的任何位置都无法修复它——您必须单击外部才能刷新。

现在，我只需要一个解决方法。我已经尝试了 500 种 $(someelement).click 或 $(someelement).focus，但它们并没有完全复制用户的“实际”点击。

有没有人见过这样的事情？谢谢。

4

2 回答 2

6

好吧，我没有找出导致问题的原因，但我发现一个快速而肮脏的修复方法可以解决问题。我只是将一个锚标记附加到 DOM，将其聚焦（使用 jQuery .focus），然后将其删除。

我之前尝试过 .focus 很多次，但我总是在 div 或 li 元素上尝试它，但没有奏效。它需要是一个锚标签。我怀疑这是因为锚标签实际上有一些可见的组件指向它的焦点，这会重置 Firefox 的内部光标显示机制中的某些内容。

无论哪种方式，如果你试图解决这样的问题并且这并不能解决它，请查看 MorganTiley 的解释——这可能会给你一些好的线索。

于 2012-06-05T19:25:10.993 回答
2

这是因为当您加载内容时，您正在更改 html 节点的结构，从而使选择无效（光标只是折叠的选择）。我建议尝试通过Rangy重置它。它与 jquery 结合使用效果很好。使用 jquery 获取 contentEditable 区域中的第一个元素，例如第一段，然后创建一个新的范围并选择该段落（节点）并折叠开始。这会将光标放在内容的最开头。这是一些粗略的代码

$(document).ready(function() {
  //init rangy
});

function ajaxLoaded {
  var p = $(".contenteditablediv p:first")[0];
  var sel = rangy.getSelection();
  sel.collapse(p, 0);
}
于 2012-06-05T14:07:01.570 回答