[JavaScript] テキストボックスやテキストエリアでTABキー押下時にタブ文字を入力する方法

更新：

WEBページのテキストボックス(<input>)やテキストエリア(<textarea></textarea>)にタブ文字を使いたいときがあります。しかし、普通にTABキーを押してもタブ文字は入力できません。WEBブラウザのTABキー押下時のデフォルト動作が「フォーカスを次へ移動させる」に設定されている為です。これはJavaScriptで少し手を加えて上げると解決することができます。

▼(sample) デフォルト状態ではTABキー押下時はフォーカスが次へ移ってしまい、タブ文字の入力はできない。


JavaScriptを使ってTABキー押下時の動作を制御

テキストボックスにタブ文字を挿入するためのソースコードを提示します。

HTML

<input id="textbox">

JavaScript

let textbox = document.querySelector('#textbox');
let f = function(e){
	if(e.keyCode==9){
		e.preventDefault();
		let newPos = textbox.selectionStart + 1;
		let value = textbox.value;
		let head = value.slice(0,textbox.selectionStart);
		let foot = value.slice(textbox.selectionEnd);
		textbox.value = head + '\t' + foot;
		textbox.setSelectionRange(newPos,newPos);
	}
};
textbox.addEventListener('keydown', f);

3行目。押されたキーがTABキーかを調べる処理です。イベントオブジェクト(e)のkeyCodeプロパティから押されたキーのキーコードを取得し、TABキーのキーコード(9)と一致するかを比較します。

4行目。ここがポイントです。e.preventdefault()メソッドでTABキーを押したときの通常の動作(フォーカスを次へ移動させる)を制御します。

5行目。最終的なキャレット位置を変数に保持しておきます。値は現在のキャレット位置にタブ文字分の1を加えたものです。

6-9行目。現在のキャレット位置にタブ文字を挿入するための処理です。キャレット前の文字列とキャレット後の文字列を変数に取得し、間にタブ文字を加えます。

10行目。5行目で取得した、最終的なキャレット位置を設定します。9行目のvalueプロパティは値を設定した際にキャレット位置が最後尾に設定されるため、この処理が必要です。

▼動作のデモです。TABキーを押したときにフォーカスが移動しなくなり、現在のキャレット位置にタブ文字が挿入されるようになりました。

サンプルではテキストボックスに対して行いましたが、テキストエリア要素(<textarea>)でも同じように書くことができます。