首頁 > web前端 > js教程 > 如何跨瀏覽器將插入符號放置在可編輯元素的文字末尾?

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

Barbara Streisand
發布: 2024-11-19 14:26:02
原創
251 人瀏覽過

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

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

簡介

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

問題

在各種瀏覽器中,例如Chrome FirefoxIE,文字在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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板