テキストボックスのTABキーをキャプチャする

keydown/ keyupイベントをキャプチャしても、これらはタブキーが起動する唯一のイベントですが、デフォルトのアクション(タブ順序で次の項目に移動)が発生しないようにする方法が必要です。

Firefoxでは、イベントハンドラーに渡されたイベントオブジェクトで「preventDefault()」メソッドを呼び出すことができます。 IEでは、イベントハンドルからfalseを返す必要があります。 JQueryライブラリは、IEおよびFFで機能するイベントオブジェクトに「preventDefault」メソッドを提供します。

<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>

フォームアイテム間のタブが壊れるくらいなら、タブのインデントが機能しない方がましです。

Markdownボックスにコードを入れるためにインデントしたい場合は、 Ctrl+K （Macでは⌘K）を使用します。

実際に動作を停止させるという点では、（スタックオーバーフローが使用している）jQueryは、イベントコールバックからfalseを返すと、イベントのバブリングを停止させることができます。これは、複数のブラウザで作業する際に便利です。

前の答えでもいいのですが、私は動作と体裁を混同すること（HTMLにJavaScriptを入れること）には断固反対なので、イベント処理のロジックはJavaScriptファイルに入れることを好んでいます。さらに、すべてのブラウザが同じようにイベント（またはe）を実装しているわけではありません。ロジックを実行する前に確認することをお勧めします。

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}

キーのデフォルトの動作を変更することはお勧めしません。 私はできるだけマウスに触れないで作業するので、もしタブキーがフォームの次のフィールドに移動しないようにされたら、非常に困るでしょう。

しかし、ショートカットキーは、特に大きなコードブロックやネストの場合に便利かもしれません。 Shift-TABは、通常、フォームの前のフィールドに移動するので、悪いオプションです。 WMDエディタにコードTABを挿入する新しいボタンとショートカットキーがあれば、可能ではないでしょうか？

ScottKoonによる最良の回答に問題があります。

ここです。

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

する必要があります。

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

このため、IEでは機能しませんでした。 ScottKoonがコードを更新することを期待しています。

MacのChromeでは、alt-tabがタブ文字を < textarea>フィールドに挿入します。

ここに1つあります。 . ウィー。!