☰

テキストエリアでタブを使用してインデントする 質問する

tag-icon • tag-icon javascript html textarea
テキストエリアでタブを使用してインデントする 質問する

私のサイトにはシンプルな HTML テキストエリアがあります。

現時点では、Tabそこをクリックすると次のフィールドに移動します。代わりに、タブ ボタンを数スペースインデントするようにしたいと思います。

これどうやってするの？

ベストアンサー1

同様の質問に対する他の回答（以下に掲載）から大幅に借用しています...

document.getElementById('textbox').addEventListener('keydown', function(e) {
  if (e.key == 'Tab') {
    e.preventDefault();
    var start = this.selectionStart;
    var end = this.selectionEnd;

    // set textarea value to: text before caret + tab + text after caret
    this.value = this.value.substring(0, start) +
      "\t" + this.value.substring(end);

    // put caret at right position again
    this.selectionStart =
      this.selectionEnd = start + 1;
  }
});
<input type="text" name="test1" />
<textarea id="textbox" name="test2"></textarea>
<input type="text" name="test3" />

jQuery: テキストボックス内で TAB キーの押下をキャプチャする方法

テキストエリアで <tab> を処理するにはどうすればいいですか?

おすすめ記事