カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

テキストエリアの途中に文字を挿入する

この記事は最終更新日から1年以上経過しています。

テキストエリアの先頭や末尾に文字を追加するのは簡単ですが、途中(カーソル位置)に挿入するにはひと手間必要です。

例として適当なフォームを作成します。

<form name="myForm">
    <textarea name="myTextarea"></textarea>
    <input type="submit" value="送信">
</form>

次に以下のようなボタンを作ります。

<button onclick="addText();">文字追加</button>

ボタンを押したときに実行されるJavaScriptが以下のようになります。

function addText()
{
    var textarea = document.myForm.myTextarea;
    var pos      = textarea.selectionStart;

    var before   = textarea.value.substr(0, pos);
    var after    = textarea.value.substr(pos);

    textarea.value = before + "追加する文字列" + after;
}
この記事がお役に立ちましたらシェアお願いします
2,863 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です