如何防止遊標重置到 ContentEditable 的開頭``？

在ContentEditable

上設定遊標位置

使用contentEditable='on'

時，通常會遇到重新取得焦點後遊標重設到文字開頭的問題。為了解決這個問題，跨瀏覽器的解決方案應運而生。

解：

1.儲存遊標位置：

function saveSelection() {
  if (window.getSelection) { // non-IE
    savedRange = window.getSelection().getRangeAt(0);
  } else if (document.selection) { // IE
    savedRange = document.selection.createRange();
  }
}

此函數到

> 的附加函數到

> 的附加函數到

> 的附加函數到

> 的附加函數到

> 的附加函數到

> 的onmouseup 和onkeyup 事件。並將目前選擇儲存到savedRange變數中。

2.恢復遊標位置：

function restoreSelection() {
  if (savedRange != null) {
    if (window.getSelection) { // non-IE
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) { // non-IE
      window.getSelection().addRange(savedRange);
    } else if (document.selection) { // IE
      savedRange.select();
    }
  }
}

此函數附加到

的 onfocus 事件。並恢復保存在savedRange中的選擇。

3.阻止點擊事件（可選）：

如果您希望遊標在點擊時恢復而不是重置到開頭，可以使用以下函數：

var isInFocus = false;

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus == false && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
    return false;
  }
}

這些函數附加到onblur、onclick 和onmousedown 事件，並防止click 事件重置遊標位置。他們還會恢復選擇，確保遊標位於上次停止的位置。

以上是如何防止遊標重置到 ContentEditable 的開頭``？的詳細內容。更多資訊請關注PHP中文網其他相關文章！