編集可能な div_javascript スキルのカーソル位置にコンテンツを挿入する JS メソッド-jsチュートリアル-php.cn

編集可能な div_javascript スキルのカーソル位置にコンテンツを挿入する JS メソッド

WBOY

リリース： 2016-05-16 16:30:55

オリジナル

2679 人が閲覧しました

この記事の例は、私たちが使用するエディタと同じように、編集可能な div 内の指定された位置にコンテンツを挿入する js メソッドを説明しており、参考のために全員と共有されています。具体的な実装方法は以下の通りです。

最初に DIV を編集モードに有効にします

コードをコピーコードは次のとおりです。

< /div>

contenteditable=true を設定して div の編集モードをオンにすると、DIV はテキストボックスのようにコンテンツを入力できます。
この話題についてはもう話す必要はありません。カーソル位置を取得または設定する方法は次のとおりです。

2 ステップ:

① DIVでカーソル位置を取得
②カーソル位置を変更

コードをコピーコードは次のとおりです。

var Cursor = 0; // カーソル位置 

document.onselectionchange = function () {

var range = document.selection.createRange();

var srcele = range.parentElement() // 現在の要素を取得します 

var copy = document.body.createTextRange();

copy.moveToElementText(srcele);

for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; カーソル ) {

copy.moveStart("character", 1); //実際には、カーソルの数を記録しています。

}

}

カーソル変更イベントをドキュメントにバインドします。カーソル位置を記録するために使用されます。
このようにして、DIV のカーソル位置を取得できます。

コードをコピーコードは次のとおりです。

function moveEnd(obj) {

lyTXT1.focus();

var r = document.selection.createRange();

//ここでの移動は現在のカーソルから始まるので（テキストボックスは0から始まるようです）、現在のカーソル位置を取得して、移動する位置の数を計算する必要があります。カーソルを目的の場所に移動します

r.moveStart('character', lyTXT1.innerText.length - カーソル);

r.collapse(true);

r.select();

}

上記により、DIV 内のカーソルを末尾に移動できます
完全な例

コードをコピーコードは次のとおりです: