JavaScript テキストエリアにタブを入力
Caution
[2020-09-07追記] document.execCommand()
は非推奨でした。この記事を参考にしないでください。
<textarea>
にタブ入力できるようにしたい時、ずっとこれ↓でやってました。
document.getElementById('my-textarea').addEventListener('keydown', event => {
if (event.key == 'Tab' && !event.ctrlKey && !event.altKey && !event.shiftKey) {
event.preventDefault();
const elem = event.target;
const start = elem.selectionStart;
const end = elem.selectionEnd;
const value = elem.value;
elem.value = value.substring(0, start) + '\t' + value.substring(end);
elem.selectionStart = start + 1;
elem.selectionEnd = elem.selectionStart;
}
});
が、別件で調べてて以下の記事を見つけました。
JavaScript でテキストエリア内の文字列を書き換えた際に undo や redo が効くようにする - Qiita
どんくさすぎてUndo/Redoができないことにすら気づいてませんでした。実際やったらできませんでした。
document.execCommand()
で現在のカーソル位置にタブを挿入すれば、Undo/Redoが効くみたいです。
document.getElementById('my-textarea').addEventListener('keydown', event => {
if (event.key == 'Tab' && !event.ctrlKey && !event.altKey && !event.shiftKey) {
event.preventDefault();
document.execCommand('insertText', false, '\t');
}
});
こんなAPIあったの初めて知った。IEでも使えるらしい。
動作サンプル
上記の2つのコードを実装したテキストエリアです。