将插入/光标位置设置为一个可满足的div的末尾

对于一个可满足的div，为了解决一些FireFox特定的问题。我不得不在div的末尾添加一个br标签。将插入/光标位置设置为一个可满足的div的末尾

<div id="testDiv" contentEditable="true"> 
Hey, click the button then hit space.<br>  
</div>

这实际上是谷歌plus如何处理他们的contentEditable div逻辑与他们的用户标记。

现在的问题是，在Firefox中将光标移动到div的末尾意味着插入符号在
标记和命中空间移动到下一行之后。

您可以在此处测试该行为：jsFiddle，方法是单击按空格键的按钮。

我用下面的代码插入符号移动到范围的最后一个位置：

function placeCaretAtEnd(el) { 
      el.focus(); 
      if (window.getSelection){ 
       if (typeof window.getSelection != "undefined" 
         && typeof document.createRange != "undefined") { 
        var range = document.createRange(); 
        range.selectNodeContents(el); 
        range.collapse(false); 
        var sel = window.getSelection(); 
        sel.removeAllRanges(); 
        sel.addRange(range); 
       } else if (typeof document.body.createTextRange != "undefined") { 
        var textRange = document.body.createTextRange(); 
        textRange.moveToElementText(el); 
        textRange.collapse(false); 
        textRange.select(); 
       } 
      } 
     }

有没有可能改变这种代码忽略了BR标签或代替移动光标位置立即在br标签之前？

来源

2013-08-05 mstef

那么问题是什么？如果我在没有'
'标签的Firefox和Chrome中运行该小提琴，则可以获得相同的功能，但是我在使用br标签时注意到了不同之处。 –

我可以更新小提琴，但在处理可编辑元素中的不可编辑html元素时，
标记非常必要。例如，如果我在可编辑的项目中有一个输入，它不会使用退格一致地删除，并且我将无法在元素之后的末尾集中注意力。 – mstef

不知道这是否会帮助其他人。这不适用于跨浏览器，但是由于我的问题是针对FireFox的，以及它如何处理BR标签的范围/选择，这似乎解决了我的问题。

我基本上只是设置的范围末端的BR前

range.setEndBefore($(el).find('br')[0]);

所以在我的功能，我这样做只适用于Firefox：

function placeCaretAtEnd(el) { 
        el.focus(); 
        if (window.getSelection){ 
         if (typeof window.getSelection != "undefined" 
           && typeof document.createRange != "undefined") { 
          var range = document.createRange(); 
          range.selectNodeContents(el); 
          range.collapse(false); 
          if ($('#browser-version-check').val() == 'firefox') { 
           range.setEndBefore($(el).find('br')[0]); 
          } 
          var sel = window.getSelection(); 
          sel.removeAllRanges(); 
          sel.addRange(range); 
         } else if (typeof document.body.createTextRange != "undefined") { 
          var textRange = document.body.createTextRange(); 
          textRange.moveToElementText(el); 
          textRange.collapse(false); 
          textRange.select(); 
         } 
        } 
       }

这里是一个更新的jsfiddle http://jsfiddle.net/mstefanko/fG5kJ/2/ ，没有包含浏览器检查，所以这个演示只能在FireFox中正常工作

来源

2013-08-05 23:42:57 mstef

将插入/光标位置设置为一个可满足的div的末尾

回答

相关问题