BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] テキストボックスのTABキーをキャプチャする【非公開

2022-11-22 23:43:56

質問

を使用できるようにしたい。 タブ キーを使用して、4 つのスペースをタブで移動できるようにしたいです。現在の方法では、Tab キーはカーソルを次の入力にジャンプさせます。

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

いくつかのブラウザ (例: FireFox) がこれを許可しないかもしれないことは理解しています。次のようなカスタム キー コンボはどうでしょうか。 シフト + タブ または Ctrl + Q ?

どのように解決するのですか？

をキャプチャしても keydown / keyup イベントを使用する場合、タブキーが発生する唯一のイベントであるため、デフォルトの動作であるタブ順序の次のアイテムへの移動が発生しないようにする方法がまだ必要です。

Firefox では preventDefault() メソッドをイベントハンドラに渡されたイベントオブジェクトに対して呼び出すことができます。IE では、イベントハンドルから false を返す必要があります。JQuery ライブラリでは preventDefault メソッドを提供しており、これは IE と 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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します