ContentEditable Div でカーソル位置を設定および維持するにはどうすればよいですか?

contentEditable <div> でカーソル位置を設定

contentEditable <div> を処理する場合、デフォルトのブラウザ機能はカーソル位置をテキストの先頭にリセットします集中力を取り戻すと。これを解決するには、次の解決策を検討してください:

カーソル位置の保存と復元:

1. 現在の位置の保存: onmouseup およびonkeyup イベントでは、現在のカーソル位置を変数に保存します。 SavedRange.
2. Restore Position: onfocus イベントで、savedRange.

から保存された選択範囲を復元します。このアプローチにより、カーソルは最後に知られている位置に配置されます。 div がフォーカスを取り戻したとき。

処理クリック数:

div をクリックしたときに選択を復元するには、次の追加手順が必要です:

1. クリック イベントのキャンセル: cancelEvent() をアタッチします。 onclick イベントと onmousedown イベントに。この関数は、これらのイベントのデフォルトの動作を防止し、restoreSelection() を呼び出します。
2. Track Focus State: isInFocus 変数を使用して、div がフォーカスされているかどうかを判断します。 div がフォーカスされていない場合にのみ、クリック イベントをキャンセルします。

作業コード:

<div>

var savedRange, isInFocus;

function saveSelection() {
  savedRange = window.getSelection ? window.getSelection().getRangeAt(0) : document.selection.createRange();
}

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange) {
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) {
      window.getSelection().addRange(savedRange);
    } else if (document.selection) {
      savedRange.select();
    }
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange) {
    if (e && e.preventDefault) {
      e.stopPropagation();
      e.preventDefault();
    } else {
      window.event.cancelBubble = true;
    }
    restoreSelection();
    return false;
  }
}

以上がContentEditable Div でカーソル位置を設定および維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。