検索

ホームページ >ウェブフロントエンド >jsチュートリアル >カーソルが ContentEditable `` の先頭にリセットされないようにする方法

カーソルが ContentEditable `` の先頭にリセットされないようにする方法

Barbara Streisand
Barbara Streisandオリジナル
2024-11-10 16:07:021092ブラウズ

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 && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
    return false;
  }
}

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

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

if Event function this position issue
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ループ内の非同期データ取得をどのように処理し、一貫したデータセットを返す前にすべてのクエリが完了していることを確認するにはどうすればよいでしょうか?次の記事：ループ内の非同期データ取得をどのように処理し、一貫したデータセットを返す前にすべてのクエリが完了していることを確認するにはどうすればよいでしょうか?

関連記事

続きを見る