jQuery:テキストボックス内でTABキープレスをキャプチャする方法


回答:


249

編集:要素は動的に挿入されるため、例のように委任on()を使用する必要がありますが、@ Marcコメントとして、IEではkeypressイベントが非文字キーをキャプチャしないため、それをkeydownイベントにバインドする必要があります。

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // call custom function here
  } 
});

こちらの例を確認してください。


IE6以降でTABを押すと、イベントが発生しません(ただし、英数字キーで発生します)... .live( 'keypress'、fn)を使用する必要があります
Jon Erickson

ライブでのみ機能する場合、textbox要素を動的に挿入している可能性があります。要素が既にページにある場合は、機能します。次の
CMS

そう、テキストボックスは動的に挿入されます。ID #textboxの私の例は、質問を単純化するためのものでした=)
Jon Erickson

@Jon、$(selector).live( "keydown"、fn)を使用していない理由は?CMSはkeydownの使用を提案しています。IEではキープレスは文字以外のキー(Tabなど)に対して機能しないためです
Marc

5
@AppleGrew:そうです、そうです、しかしそれは真実ではありません-少なくともキーを押すことについては。タブe.whichは0で、e.keyCodeは9です(あるはずです)。FF 3.5.16、jQuery 1.6.2でテスト済み。
johndodo

19

jQuery 1.9での作業例:

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});

2
e.preventDefault();テキストボックスに空白が挿入されないようにするには、doubleにします。
STIL

12
$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});

2
また、デフォルトのアクションをキャンセルするには、e.preventDefault();を使用します。関数の最初の行。
Josh Leitzel、

@ジョン、キープレスはIEで文字以外のキーをキャプチャしない
Marc

@Marcなるほど。IEとFFとの互換性はどのように確保できますか?
ジョンエリクソン

4
^^皮肉なことに、jQueryはブロワー間のギャップを埋めるためのものなので、このようなことを心配する必要はありません。
ヤークト、

@ Jagd、jQueryは意図を推測できません。keypressとkeydownは、正当な理由により同等ではありません。たまたまそうなのですが、この状況では区別は必要ありません。
マルク・

7

上記の方法は私にとってはうまくいきませんでした、少し古いjqueryを使用している可能性があります。最後に、以下に示すコードスニペットが機能します-同じ場所に誰かがいる場合に備えて投稿する

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});

5

タブでキーダウンを使用する際の重要な部分は、タブが常に何かをしようとすることを知っていることです。最後に「falseを返す」ことを忘れないでください。

これが私がしたことです。.blurで実行される関数と、フォームのフォーカスがある場所を入れ替える関数があります。基本的に、フォームの最後に入力を追加し、ぼかしの計算を実行しながらそこに移動します。

$(this).children('input[type=text]').blur(timeEntered).keydown(function (e) {
        var code = e.keyCode || e.which;
        if (code == "9") {
            window.tabPressed = true;
            // Here is the external function you want to call, let your external
            // function handle all your custom code, then return false to
            // prevent the tab button from doing whatever it would naturally do.
            focusShift($(this));
            return false;
        } else {
            window.tabPressed = false;
        }
        // This is the code i want to execute, it might be different than yours
        function focusShift(trigger) {
            var focalPoint = false;
            if (tabPressed == true) {
                console.log($(trigger).parents("td").next("td"));
                focalPoint = $(trigger).parents("td").next("td");

            }
            if (focalPoint) {
                $(focalPoint).trigger("click");
            }
        }
    });

4

これを試して:

$('#contra').focusout(function (){
    $('#btnPassword').focus();
});

1

ID txtNameを持つTextBoxがあるとします

$("[id*=txtName]").on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {
     e.preventDefault();
     alert('Tab Pressed');
 }
}); 

1

この JQuery API を使用してイベントタブをキャプチャできます。

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});

evt.preventDefault();を追加した後、私にとってはうまくいきます in the if
LowFieldTheory 2018

-1

これは私のために働きました:

$("[id*=txtName]").on('keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); alert('Tab Pressed'); } });

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.