1. ホーム
  2. javascript

[解決済み] JavaScriptのsetSelectionRange()メソッドとカーソル位置について

2022-02-28 02:41:34

質問

私は、ユニコード文字(以下、txtToIns変数で表される)をテキスト本文に動的に挿入するためのJavaScriptの次の部分を持っています。

elmt.value = elmt.value.substring(0, elmt.selectionStart) + txtToIns + " " + elmt.value.substring(elmt.selectionStart, elmt.selectionEnd) + elmt.value.substring(elmt.selectionEnd, elmt.value.length) + " ";
elmt.focus();
elmt.value = elmt.value.trim();

上記では、カーソルは常にテキストの末尾にあります。txtToInsの直後に配置する方法はないでしょうか?また、txtToIns.focus()はうまくいきません。

どのように解決するのですか?

テキストエリアの値の中にあるスペース文字、特に最後の文字は2行後にまた切り捨てられるので、以下のコードではスペースを無視しています。また、以前に選択されていたテキストをどうしたいのかもわからないので、新しいテキストで上書きしたいのだろうと推測します。

をサポートしていないIE < 9では動作しないことに留意してください。 selectionStart , selectionEnd また setSelectionRange() .

デモ http://jsfiddle.net/timdown/wPfVn/

コード

var val = elmt.value;
var start = elmt.selectionStart, end = elmt.selectionEnd;
elmt.value = val.slice(0, start) + txtToIns + val.slice(end);
elmt.focus();
var caretPos = start + txtToIns.length;
elmt.setSelectionRange(caretPos, caretPos);