JavaScript テキストエリアのカーソル位置にテキストを挿入する
JavaScriptでテキストエリアのカーソル位置にテキストを挿入する方法を紹介します。
カーソル位置の取得
テキストボックスまたはテキストエリアのカーソル位置はselectionStartで取得できます。
以下のテキストエリアの要素が定義されているとします。
<textarea id="txt1"></textarea>このテキストエリアのカーソル位置は以下のように取得します。
// 対象の要素を取得
var target = document.getElementById('txt1');
// カーソル位置を取得
var pos = target.selectionStart;テキストの挿入
カーソル位置にテキストを挿入します。
まずはテキストエリアの値をカーソル位置で分割します。
// 対象の要素を取得
var target = document.getElementById('txt1');
// カーソルの前の文字列
var value1 = target.value.substr(0, target.selectionStart);
// カーソルの後の文字列
var value2 = target.value.substr(target.selectionStart);取得した文字列の間に、挿入したい文字列を設定します。
var newvalue = value1 + '挿入したい文字列' + value2;上記の文字列を対象の要素にセットすれば、完了です。
処理をまとめると以下のようになります。
// 対象の要素を取得
var target = document.getElementById('txt1');
// カーソル位置に文字列を挿入
target.value = target.value.substr(0, target.selectionStart)
+ '挿入したい文字列'
+ target.value.substr(target.selectionStart);