首頁 > web前端 > js教程 > 如何將遊標移到 ContentEditable 元素的末端?

如何將遊標移到 ContentEditable 元素的末端?

Patricia Arquette
發布: 2024-11-11 01:50:02
原創
960 人瀏覽過

How to Move the Cursor to the End of a ContentEditable Element?

將遊標移到Contenteditable 實體的末尾

曾經遇到需要將遊標定位到contenteditable 元素的末尾的情況,類似於Gmail 筆記小工具中的功能?

解決方案

對於可內容編輯的元素,Geowa4 的解決方案不適用。需要量身訂製的方法:

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  if (document.createRange) {
    // Modern browsers
    range = document.createRange();
    range.selectNodeContents(contentEditableElement);
    range.collapse(false);
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  } else if (document.selection) {
    // IE 8 and below
    range = document.body.createTextRange();
    range.moveToElementText(contentEditableElement);
    range.collapse(false);
    range.select();
  }
}
登入後複製

要使用它,只需按照程式碼範例操作:

var elem = document.getElementById("txt1");
setEndOfContenteditable(elem);
登入後複製

相容性

此解決方案是相容於所有支援contenteditable 的主流瀏覽器。

以上是如何將遊標移到 ContentEditable 元素的末端?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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