如何防止光标重置到 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中文网其他相关文章！