textarea内でタブを入力可能にする。ついでにタブ幅も変更する。
テキストエリアの中でタブを入力しようとすると、次の input 要素にフォーカスが移ってしまい、入力できません。これは不便。
JavaScriptでキーボード入力を監視して、tabキーが押されたらカーソル位置にタブコード "\t" を挿入…という方法で実現可能です。
サンプルは例えば → テキストエリア内にタブを入力する - 日本だんでぃ協会。シンプルで良いです。
実際にスクリプトを仕込んでみると…
タブの幅が半角8文字ぶん。ちょっと大きすぎる気がします。そんなとき、タブのサイズを変更するために、textarea にスタイル tab-size を設定してやります。
→ tab-size - CSS: カスケーディングスタイルシート | MDN
tab-size の初期値は 8（半角8文字分）です。
ということで、テキストエリアに
…というスタイルを適用してみました。下のテキストエリアで試してみてください。
はい、半角4文字分のタブ入力ができるようになりました。
コメント