JavaScript | テキストエリアでタブの入力を可能にする方法
JavaScriptでテキストエリア内でタブの入力を可能にする方法を紹介しています。
WordPressなどでテキストエリアにスクリプトコードを記述する際なんかも、タブが入力できなくて少々面倒なのを解決します。
テキストエリアでタブの入力を可能にする方法
テキストエリアでタブキーからタブを入力できるようにするには、タブキーが押された場合の発火イベントを作成し、デフォルトのフォーカス移動動作を無効化、カーソル位置にタブを挿入させるスクリプトを作成する事で実装可能です。
以下は、その方法でテキストエリアでタブの入力を可能にした動作サンプルとサンプルコードになります。
動作サンプル用テキストエリア
<p><textarea id="target"></textarea></p>// 対象とするテキストエリア
let textarea = document.querySelector('#textarea');
// キーダウンイベント
textarea.addEventListener("keydown", function (e) {
// タブキーが押された場合
if (e.key === "Tab") {
// デフォルトの動作を無効化
e.preventDefault();
// 入力時のカーソル位置を取得
let selectionPosition = e.target.selectionStart;
// カーソル位置にタブを挿入
e.target.value = e.target.value.slice(0, e.target.selectionStart) + "\t" + e.target.value.slice(target.selectionEnd);
// カーソル位置を戻す
e.target.selectionStart = e.target.selectionEnd = selectionPosition + 1;
}
});タブの入力後、カーソルが末尾に移動してしまいますので、元のカーソル位置を変数に保持しておき、最後にカーソル位置を移動させています。
元に戻す（Undo）操作を有効にする
上記のコードでは、タブの入力後の元に戻す（Undo）操作がタブの入力分だけですが、上手くいかない状態となります。
元に戻す（Undo）操作を有効にするには、dispatchEvent()などを利用してブラウザに変更前の状態と変更された事を伝える必要がありますが、コードが長くなります。
以下、サンプルコードではexecCommand()メソッドを利用して、タブ入力時にも元に戻す（Undo）の操作を正常に機能させています。
execCommand()は既に非推奨とされているメソッドですが、現状ではブラウザにて互換性は保持されていますので、代替APIが実装されるまで利用する手もあります。
関連：Document: execCommand() メソッド – Web API | MDN
動作サンプル用テキストエリア
<p><textarea id="textarea"></textarea></p>// 対象とするテキストエリア
let textarea = document.querySelector('#textarea');
// キーダウンイベント
textarea.addEventListener("keydown", function (e) {
// タブキーが押された場合
if (e.key === "Tab") {
// デフォルトの動作を無効化
e.preventDefault();
// 入力時のカーソル位置を取得
let selectionPosition = e.target.selectionStart;
// カーソル位置にタブ文字を挿入
document.execCommand('insertText', false, '\t');
// カーソル位置を戻す
e.target.selectionStart = e.target.selectionEnd = selectionPosition + 1;
}
});