Question

我有一个我遇到的绝对奇怪的错误，而且我已经接近了我的智慧。任何有关如何调试这个（或任何聪明的解决方法）的想法的人都会很棒。

问题：

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

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

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

以前有人见过这样的事吗？谢谢。

Answer 1

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

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

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

Answer 2

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

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

function ajaxLoaded {
  var p = $(".contenteditablediv p:first")[0];
  var sel = rangy.getSelection();
  sel.collapse(p, 0);
}

Firefox光标不可见，在单击其他任何内容时变为可见

2 个答案: