カーソルが ContentEditable `` の先頭にリセットされないようにする方法-jsチュートリアル-php.cn

How to Prevent the Cursor from Resetting to the Beginning of a 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 &amp;&amp; savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
    return false;
  }
}

ログイン後にコピー

これら関数は onblur、onclick、および onmousedown イベントに付加され、クリックイベントがカーソル位置をリセットするのを防ぎます。また、選択内容が復元され、カーソルが中断した場所に確実に配置されます。

以上がカーソルが ContentEditable `` の先頭にリセットされないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：ループ内の非同期データ取得をどのように処理し、一貫したデータセットを返す前にすべてのクエリが完了していることを確認するにはどうすればよいでしょうか? 次の記事：MERN スタックを使用した SaaS (Software as a Service) プラットフォームの作成

このウェブサイトの声明

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

著者別の最新記事