JavaScriptでテキストエリアのカーソル位置に文字を挿入する方法

前回の記事で、WordPressの投稿画面の話をしましたが、そういえばこの投稿画面にあるタグ挿入のボタンって便利だなぁ、と思ったので、JavaScriptでテキストエリアに文字列を挿入するサンプルを作ってみました。

要するにHTMLタグであるtextareaにボタンひとつで好きな文字列を挿入する機能です。

テキストエリアの末尾に文字列を挿入するサンプル

まぁ、テキストエリアの前か後ろに挿入するのは単なる文字列操作だけなので簡単です。

動作サンプル

ボタンをクリックするとテキストエリアの末尾に文字が追加されます。

JavaScriptコードサンプル

<script>
function addText()
{
	document.getElementById('textarea1').value
		+= document.getElementById('text1').value;
}
</script>

<input type="text" id="text1" value="挿入する文字">
<button onclick="addText();">末尾に文字列を挿入</button>

<textarea id="textarea1" rows="5">
あいうえお
かきくけこ
さしすせそ
</textarea>

解説

解説も何もあったもんじゃない気もしますが、textarea1の内容を取得して、後ろにtext1の文字列を追加するというシンプルな処理です。

テキストエリアの先頭に文字列を挿入するサンプル

こちらも単なる文字列操作ですが、+=演算子で繋げるだけではないので、ほんのわずかにコードは長くなります。

動作サンプル

ボタンをクリックするとテキストエリアの先頭に文字が追加されます。

JavaScriptコードサンプル

<script>
function addText2()
{
	document.getElementById('textarea2').value = 
	document.getElementById('text2').value + document.getElementById('textarea2').value;
}
</script>

<input type="text" id="text2" value="挿入する文字" style="width:10em;">
<button onclick="addText2();">先頭に文字列を挿入</button>

<textarea id="textarea2" rows="5">
あいうえお
かきくけこ
さしすせそ
</textarea>

解説

textarea2の内容を取得した後、text2とtextarea2をくっつけてtextarea2に戻すだけです。

テキストエリアのカーソル位置に文字列を挿入するサンプル

さて、いよいよ本命のカーソル位置に文字列を挿入する方法です。

動作サンプル

テキストエリア内の好きな位置にカーソルを置いて(クリックして)ボタンを押すとその位置に文字列が挿入されます。

JavaScriptコードサンプル

<script>
function addText3()
{
	//テキストエリアと挿入する文字列を取得
	var area = document.getElementById('textarea3');
	var text = document.getElementById('text3').value;
	//カーソルの位置を基準に前後を分割して、その間に文字列を挿入
	area.value = area.value.substr(0, area.selectionStart)
			+ text
			+ area.value.substr(area.selectionStart);
}
</script>

<input type="text" id="text3" value="挿入する文字">
<button onclick="addText3();">カーソル位置に文字列を挿入</button>

<textarea id="textarea3" rows="5">
あいうえお
かきくけこ
さしすせそ
</textarea>

解説

textareaが持つ、selectionStartプロパティにカーソル位置が入っているため、その前後を切り取って、間に挿入したい文字列を入れるだけです。

文字列を切り取る操作にはsubstr関数を使っています。

でもこれだと選択範囲の前後に文字列を入れることができません。

テキストエリアの選択範囲の前後に文字列を挿入するサンプル

最後に、WordPressのタグ挿入ボタンなどで使われる手法の解説です。

動作サンプル

「かきくけこ」あたりをマウスで範囲選択し、ボタンを押すと

<strong>かきくけこ</strong>

というようにタグで囲むことが出来ます。

JavaScriptコードサンプル

<script>
function addText4()
{
	//テキストエリアと挿入する文字列を取得
	var area = document.getElementById('textarea4');
	var text1 = document.getElementById('text4_1').value;
	var text2 = document.getElementById('text4_2').value;
	//カーソルの開始位置と終了位置を基準に分割
	area.value = area.value.substr(0, area.selectionStart)
			+ text1
			+ area.value.substr(area.selectionStart, area.selectionEnd - area.selectionStart)
			+ text2
			+ area.value.substr(area.selectionEnd);
}
</script>

<input type="text" id="text4_1" value="&lt;strong&gt;">
<input type="text" id="text4_2" value="&lt;/strong&gt;">
<button onclick="addText4();">選択範囲の前後に文字列を挿入</button>

<textarea id="textarea4" rows="5">
あいうえお
かきくけこ
さしすせそ
</textarea>
</p>

解説

前述のサンプルではテキストエリアの selectionStart を基準に前後を切り分けましたが、今度は selectionStart ~ selectionEnd の範囲を残して、その前後にtext1とtext2を挿入しています。

こうすることで、選択した文字列の前後に開始タグと終了タグをボタンひとつで挿入することができるわけですね。

まとめ

  • JavaScriptでテキストエリアに文字を挿入するのは単なる文字列操作でOK
  • カーソル位置に挿入したい場合はテキストエリアのselectionStartプロパティでカーソル位置を取得すれば良い
  • テキストエリアの選択範囲を知りたい場合はselectionStart~selectionEndで選択開始位置と選択終了位置が取得できる

と、こんなところでしょうか。

JavaScriptを知らない方にとってはちんぷんかんぷんな話だと思いますが、カジっている人なら、まぁこれで通じるんじゃないかな…。

こういったシンプルなコードを組み合わせるだけで、意外と簡単に自分独自のオレオレCMSなんかも作れちゃいますので、ぜひチャレンジして頂きたいところです。

Web運営を長く続けるコツは更新処理の簡略化だと思うんですよね。

adsbygoogle

フォロー