zukucode
主にWEB関連の情報を技術メモとして発信しています。

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);


関連記事