テキストボックスでのTABキーのキャプチャ[終了]

100

Tabテキストボックス内のキーを使用して、4つのスペースをタブで移動できるようにしたいと思います。現在の状態では、Tabキーを押すとカーソルが次の入力にジャンプします。

UIに表示される前にテキストボックスのTabキーをキャプチャするJavaScriptはありますか？

一部のブラウザ（FireFoxなど）ではこれが許可されない場合があることを理解しています。Shift+ TabやCtrl+ などのカスタムキーコンボはどうQですか？

javascript user-interface

— セイバー
ソース

フォーカスされたウィンドウを確認することを忘れないでください。エディタのテキスト領域にいない場合は、ウィンドウが正常に表示されます。

— FlySwat 2008

この投稿には「meta.stackoverflow.comに属している」というモデレーターのフラグが付けられていますが、2年以上前のものなので、移行しません。

— Robert Harvey

108

keydown/ keyupイベントをキャプチャした場合でも、それらがタブキーによって発生する唯一のイベントですが、デフォルトのアクション（タブオーダーの次の項目に移動する）が発生しないようにする方法が必要です。

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

<body>
<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>
</body>

— スコットクーン
ソース

1

「if（el.attachEvent）」から「if（myInput.attachEvent）」に4行目を修正しました

— Fenton

このコードは最後にのみTABを追加することに注意してください。ほとんどの場合、これは不便です。

— Alexander Palamarchuk

@SteveFentonでスペースを再度削除する簡単な方法はありkeycode 8ますか？

— yckart

18

フォームアイテム間のタブ移動を解除するよりも、タブインデントが機能しないほうがいいです。

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

実際にアクションを停止するという意味では、jQuery（Stack Overflowが使用）は、イベントコールバックからfalseを返すと、イベントのバブリングを停止します。これにより、複数のブラウザでの作業が楽になります。

— ローレン
ソース

13

前の答えは結構ですが、私は動作とプレゼンテーションの混合（HTMLにJavaScriptを置く）に強く反対する人の1人なので、イベント処理ロジックをJavaScriptファイルに入れることを好みます。さらに、すべてのブラウザーがイベント（またはe）を同じ方法で実装するわけではありません。ロジックを実行する前にチェックを行うことをお勧めします。

document.onkeydown = TabExample;

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

— トム
ソース

6

キーのデフォルトの動作を変更しないことをお勧めします。マウスに触れずにできる限り多くのことを行うので、タブキーをフォームの次のフィールドに移動しないようにすると、非常に悪化します。

ただし、ショートカットキーは、特に大きなコードブロックと入れ子の場合に役立ちます。通常、Shift-TABはフォームの前のフィールドに移動するため、不適切なオプションです。たぶん、ショートカットキーを使用して、コードタブを挿入するWMDエディターの新しいボタンが可能でしょうか。

— ウォーリー・ローレス
ソース

1

問題は完全にアプリケーションに依存しています。コードエディターコントロールに取り組んでいます。タブキーを提供しなかったので、生徒全員が不満を言っていました。目の不自由な生徒のアクセシビリティを壊したくなかったからです。これでタブのサポートが追加されましたが、それをオフにするユーザー設定オプションも提供しました。

— Charles

@Charlesは、アクセシビリティの影響について非常に良い点です。

— Wally Lawless

4

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がコードを更新することを期待

— ちんたん123
ソース

3

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

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

— ポール・D・ウェイト
ソース