プロジェクトでは入力ボックス内の任意の位置にコンテンツを追加する必要がありますが、ここではinputのselectionStart属性とsetSelectionRangeメソッドによって実現しています。
まず、selectionStart 属性を確認します。これはテキスト ボックスの選択領域の開始位置を取得するために使用され、selectionEnd はテキスト ボックスの選択領域の終了位置を取得するために使用されます。次に例を示します。
この関数ではテキストを選択するのではなく、主にカーソルの位置を取得する必要がありますが、テキストが選択されていない場合、selectionStart プロパティとselectionEnd プロパティの値は同じになります。
setSelectionRange メソッドをもう一度見てください。このメソッドは入力要素にも作用します。開始位置と終了位置を設定することでテキストの一部を選択できます。inputElement.setSelectionRange(selectionStart,selectionEnd, [オプション]selectionDirection)、方向。開始位置と終了位置が同じ場合、入力ボックス内のカーソルの位置を変更することと同じになります。
具体的な実装を見てみましょう。
コードは以下のように表示されます:
async insertContent(val){
let dom = this.$refs.textareaI.$refs.textarea;
// console.dir(dom);
let index = dom.selectionStart;
let contont = dom.value;
this.textarea = contont.substring(0,index) + val + contont.substring(index,contont.length)
await this.$nextTick();
dom.focus();
dom.setSelectionRange(index + val.length,index + val.length)
},注意すべき点がいくつかあります: カーソル位置を変更する前に、dom の更新が完了するまで必ず待ってください。
もう 1 つの小さなヒント:
vue の ref で取得した要素ノードであっても、ネイティブで取得したノードであっても、要素ノードのプロパティを表示したい場合は、次の 3 つの方法で表示できます。
パッケージ配列: console.log([dom])
パッケージオブジェクト: console.log({dom})
console.dir を使用して印刷すると、オブジェクトのすべてのプロパティとプロパティ値を印刷できます。