如何在跨浏览器环境中将插入符始终放置在内容末尾？

内容末尾的插入符放置：跨浏览器解决方案

在 Web 开发中，允许用户编辑文本需要确保插入符 (光标）正确显示。这在处理跨浏览器兼容性时提出了挑战。

浏览器特定行为

不同的浏览器以不同的方式处理 contenteditable:

• Chrome：插入
  用于换行
• Firefox：插入
  >并使用
  ;对于新行
• IE：插入

  对于新段落

在末尾设置插入符

要在文本末尾一致设置插入符，无论使用哪种浏览器，您可以实现以下函数:

<pre class="brush:php;toolbar:false">el.focus();
if (typeof window.getSelection != "undefined"
        &amp;&amp; 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();
}

}


实现

要使用此函数，只需在完成后调用它即可创建了一个可编辑元素：

...

placeCaretAtEnd( document.querySelector('p') );

好处

此跨浏览器解决方案为文本编辑提供一致且用户友好的体验，确保光标始终正确定位在文本末尾文字。