如何跨浏览器将插入符号放置在可编辑元素的文本末尾？-js教程-PHP中文网

如何跨浏览器将插入符号放置在可编辑元素的文本末尾？

Barbara Streisand

发布： 2024-11-19 14:26:02

原创

249 人浏览过

How to Place the Caret at the End of Text in a Contenteditable Element Across Browsers?

在跨浏览器的文本末尾设置插入符号位置

简介

在文本末尾插入换行符和设置插入符号位置可能因浏览器而异。本文探讨了一种跨浏览器解决方案，用于在单击按钮时在文本末尾设置插入符号。

问题

在各种浏览器中，例如 Chrome、 Firefox 和 IE，文本在 contenteditable 元素中存储和显示的方式不同。这可能会导致不良的换行或格式设置。

此外，单击按钮后在文本末尾设置插入符号位置需要跨浏览器采用一致的方法。

解决方案

下面的 JavaScript 函数提供了一个跨浏览器的解决方案，可以将插入符号放在text:

function placeCaretAtEnd(el) {
  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();
  }
}

登录后复制

该函数将对 contenteditable 元素 (el) 的引用作为输入。它检查现代浏览器中存在的 getSelection 和 createRange 方法。如果可用，它会创建一个范围，选择元素的整个内容，将范围折叠到末尾，并设置选择。

对于缺少这些方法的旧版浏览器，该函数使用 createTextRange 方法来实现相同的效果。

要使用此函数，应该在单击按钮时调用它，如下所示：

$(document).ready(function() {
  $('#insert_caret').click(function() {
    var ele = $('#content');
    placeCaretAtEnd(ele);
  });
});

登录后复制

以上是如何跨浏览器将插入符号放置在可编辑元素的文本末尾？的详细内容。更多信息请关注PHP中文网其他相关文章！