JavaScript - テキストエリアでタブを入力可能にする

JavaScriptでテキストエリアでタブを入力可能にする方法と簡単なコード例です。

HMLにはタブの入力を可能にするテキストエリアを設置しています。

<textarea id="target" placeholder="このテキストエリアはタブが入力可能です。"></textarea>

addEventListener()でテキストエリアの入力イベントを実装しています。

「event.key」にて入力されたキーが「Tab」かどうか判定します。
「event.preventDefault()」でデフォルトの動作であるフォーム移動を無効化します。
document.execCommand()でタブを入力しています。

またタブの入力後、カーソル位置が期待する位置になるよう設定しています。

document.querySelector('#target').addEventListener('keydown', () => {
	if (event.key === "Tab") {
		// デフォルトの動作を無効化
		event.preventDefault();
		// 入力時のカーソル位置を取得
		let selectionPosition = event.target.selectionStart;
		// カーソル位置にタブ文字を挿入
		document.execCommand('insertText', false, '\t');
		// カーソル位置を戻す
		event.target.selectionStart = event.target.selectionEnd = selectionPosition + 1;
	}
});