テキストエリア内にタブを入力する

さて、今回はテキストエリア内にタブを入力する方法を解説します！

このサイトはプログラム系の記事を多く書いていく予定なので、
記事の更新をするテキストエリアにタブが打てないと色々と不便な場面が出てくると思われます。

テキストエリアにタブが打てるというのはどういうことなのか、実際に体験していただきましょう。

試しに、↑のテキストエリア内でタブキーを押してみてください。

↑こっちにカーソルが移動しちゃうでしょ？

つまり、デフォルトの状態だと、タブキーは「次の入力フォームへ移動する」という機能になっているわけですね。

では、タブキーが入力できるテキストエリアはこちらです。

どうでしょうか？
タブキーを押したら、カーソルの位置にタブが入力されたはずです。

さて、これは以下のようなコードで実装されています。

<textarea id="enableTabTextarea">
	タブが入力できるテキストエリアです
</textarea>

<script>

function OnTabKey( e, obj ){

	// タブキーが押された時以外は即リターン
	if( e.keyCode!=9 ){ return; }

	// タブキーを押したときのデフォルトの挙動を止める
	e.preventDefault();

	// 現在のカーソルの位置と、カーソルの左右の文字列を取得しておく
	var cursorPosition = obj.selectionStart;
	var cursorLeft     = obj.value.substr( 0, cursorPosition );
	var cursorRight    = obj.value.substr( cursorPosition, obj.value.length );

	// テキストエリアの中身を、
	// 「取得しておいたカーソルの左側」+「タブ」+「取得しておいたカーソルの右側」
	// という状態にする。
	obj.value = cursorLeft+"\t"+cursorRight;

	// カーソルの位置を入力したタブの後ろにする
	obj.selectionEnd = cursorPosition+1;
}

// 対象となるテキストエリアにonkeydownイベントを追加する
document.getElementById( "enableTabTextarea" ).onkeydown = function( e ){ OnTabKey( e, this ); }

</script>

こんな感じです。

今回の実装の方法を調べているとjQueryを利用したやり方がたくさん出てきたのですが、
ここは基本に立ち返って、jQuery等のライブラリを使わずに生のjavascriptだけで実装してみました。

なので、もしも使いたい方がいたらコピペするだけで使えると思います。

さて、取りあえずこれでこのサイトを更新するにあたって不便に感じていた点は一通り片付いたので、
次回からは何かテーマを決めてプログラミングの記事を更新していきたいと思います。

音楽とかポーカー関連の記事も更新していきますのでお楽しみに！

■テキストエリア内にタブを入力する