ContentEditable ``でカーソル位置を維持する方法?-jsチュートリアル-php.cn

ContentEditable ``でカーソル位置を維持する方法?

Barbara Streisand

リリース： 2024-11-12 08:59:02

オリジナル

189 人が閲覧しました

How to Maintain Cursor Position in a ContentEditable ``?

コンテンツ編集可能な

でカーソル位置を維持する

編集可能なコンテンツを操作する場合

要素では、要素がフォーカスを取り戻した後もカーソル位置を保持することが望ましいことがよくあります。デフォルトでは、ブラウザは通常、再フォーカス時にカーソルをテキストの先頭にリセットします。

解決策の概要

この問題を解決するには、現在のカーソル位置を保存します。 div がフォーカスを失ったときに、フォーカスを取り戻したときに復元します。以下に、主要なブラウザ間で動作する実装を示します。

var savedRange; // Variable to store the saved selection
var isInFocus; // Flag to track focus state

function saveSelection() {
  if (window.getSelection) {
    // Browser-specific logic to save the selected range
    savedRange = window.getSelection().getRangeAt(0);
  }
}

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

  if (savedRange != null) {
    // Browser-specific logic to restore the saved range
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    }
  }
}

// Optional code for selection restoration on click
function cancelEvent(e) {
  if (isInFocus == false && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
  }
}

// Event handlers for saving and restoring selection
$(document).ready(function() {
  $("#area").focus(function() {
    isInFocus = true;
  });

  $("#area").blur(function() {
    isInFocus = false;
    saveSelection();
  });

  $("#area").mouseup(function() {
    saveSelection();
  });

  $("#area").keyup(function() {
    saveSelection();
  });

  $("#area").focusin(function() {
    restoreSelection();
  });

  // Optional event handlers for restoring selection on click
  $("#area").mousedown(function(e) {
    return cancelEvent(e);
  });

  $("#area").click(function(e) {
    return cancelEvent(e);
  });
});

ログイン後にコピー

このソリューションは、再フォーカス時のカーソル位置の復元と、クリック時に選択を復元するオプションの動作の両方をカバーします。すべての主要なブラウザと互換性があり、編集可能なコンテンツ

内でカーソルの位置が失われる問題に対する決定的な解決策を提供します。

以上がContentEditable ``でカーソル位置を維持する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：x-www-form-urlencoded データをフェッチで POST する方法次の記事：JavaScript で名前によってグローバル変数に動的にアクセスするにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事