textareaでTAB入力

<textarea/> のフォーカス内でTABキーを押すと普通は次のform部品へフォーカスが移ってしまうが、これをTAB入力に変換する。フォーカス動作はキャンセルしなければならないので keydown イベントを使う。

// textareaでのTABキー入力
$('textarea').on('keydown', function(e){
    if (e.keyCode === 9) {
        e.preventDefault();
        var elem = e.target;
        var val = elem.value;
        var pos = elem.selectionStart;
        elem.value = val.substr(0, pos) + '\t' + val.substr(pos, val.length);
        elem.setSelectionRange(pos + 1, pos + 1);
    }
});

• e.keyCode === 9
  TABキー押し下げを検知する。
• e.preventDefault()
  ブラウザのデフォルト動作を停止する。つまりフォーカス移動をキャンセルする。
• e.target
  イベント対象のDOMエレメントを取得する。すなわち <textarea/> 本体。jQueryの $(this)[0] におなじ。
• elem.value
  入力されている <textarea/> の内容。
• elem.selectionStart
  キャレットカーソルの位置。次の行でこの位置に\tを挿入して書き戻している。
• elem.setSelectionRange(Start, End, [Direction])
  キャレットを\tの後ろへ進める。選択範囲は無いので Start と End にはおなじ値を指定する。

なお selectionStart/selectionEnd プロパティは直接書き換えることもできる。またキャレット選択範囲の後方は elem.selectionEnd で得られる。なので選択範囲があるなら丸ごとインデントするといったコードも書けなくはない。選択方向を指示する Direction はプラットフォームによって挙動が若干異なるのでこちら¹も参照のこと。