如何跨瀏覽器將插入符號放置在可編輯元素的文字末尾？

在跨瀏覽器的文字結尾設定插入符號位置

簡介

在文字結尾插入換行符和設定插入符號位置可能因瀏覽器而異。本文探討了一種跨瀏覽器解決方案，用於在單擊按鈕時在文字末尾設定插入符號。

問題

在各種瀏覽器中，例如Chrome、 Firefox 和IE，文字在contenteditable 元素中儲存和顯示的方式不同。這可能會導致不良的換行或格式設定。

此外，點擊按鈕後在文字末尾設定插入符號位置需要跨瀏覽器採用一致的方法。

解決方案

下面的JavaScript 函數提供了一個跨瀏覽器的解決方案，可以將插入符號放在text:

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

該函數將對contenteditable元素(el) 的引用作為輸入。它檢查現代瀏覽器中存在的 getSelection 和 createRange 方法。如果可用，它會建立一個範圍，選擇元素的整個內容，將範圍折疊到末尾，並設定選擇。

對於缺少這些方法的舊版瀏覽器，函數使用 createTextRange 方法來實現相同的效果。

要使用此函數，應該在按一下按鈕時呼叫它，如下所示：

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

以上是如何跨瀏覽器將插入符號放置在可編輯元素的文字末尾？的詳細內容。更多資訊請關注PHP中文網其他相關文章！