107

Tabテキスト ボックス内でキーを使用して、4 つのスペースをタブで移動できるようにしたいと考えています。今のやり方では、Tab キーはカーソルを次の入力にジャンプさせます。

UI にバブルアップする前に、テキスト ボックス内の Tab キーをキャプチャする JavaScript はありますか?

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

4

6 に答える 6

114

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

preventDefault()Firefoxでは、イベントハンドラーに渡されたイベントオブジェクトのメソッドを呼び出すことができます。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>
于 2008-08-16T13:55:26.087 に答える
18

フォームアイテム間のタブを壊すよりも、タブのインデントが機能しない方がいいです。

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

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

于 2008-08-06T13:36:04.220 に答える
13

前の回答は問題ありませんが、私は動作とプレゼンテーションを混在させる (JavaScript を HTML に入れる) ことに断固として反対する人の 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
  }
}
于 2008-08-06T13:35:44.157 に答える
6

キーのデフォルトの動作を変更しないことをお勧めします。私はできる限りマウスに触れずにやっているので、タブキーがフォームの次のフィールドに移動しないようにすると、非常に腹が立ちます。

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

于 2008-08-06T13:36:33.640 に答える
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 がコードを更新することを期待して

于 2010-09-09T06:14:55.220 に答える