編集可能な div_javascript スキルのカーソル位置にコンテンツを挿入する JS メソッド
div
js
コンテンツ
編集可能
入れる
この記事の例は、私たちが使用するエディタと同じように、編集可能な 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); //実際には、カーソルの数を記録しています。
}
}
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();
}
lyTXT1.focus();
var r = document.selection.createRange();
//ここでの移動は現在のカーソルから始まるので（テキストボックスは0から始まるようです）、現在のカーソル位置を取得して、移動する位置の数を計算する必要があります。カーソルを目的の場所に移動します
r.moveStart('character', lyTXT1.innerText.length - カーソル);
r.collapse(true);
r.select();
}
上記により、DIV 内のカーソルを末尾に移動できます
完全な例
コードをコピー コードは次のとおりです: