jQuery:如何在文本框中捕获TAB按键


Answers:


249

编辑:由于元素是动态插入的,因此您必须像示例中那样使用委托on(),但是您应该将其绑定到keydown事件,因为作为@Marc注释,在IE中,keypress事件不会捕获非字符键:

$("#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)
乔恩·埃里克森

如果仅在现场使用,则可能是在动态插入文本框元素,如果该元素已在页面上,它将可以正常工作,请查看以下示例:jsbin.com/oguhe
CMS 2009年

是的,文本框是动态插入的。我的ID为#textbox的示例只是为了简化问题=)
乔恩·埃里克森

@Jon,未使用$(selector).live(“ keydown”,fn)的原因是?CMS建议使用keydown,因为在IE中,keypress不适用于非字符键(例如Tab)
Marc

5
@AppleGrew:它是这样说的,是的,但这不是真的-至少对于按键来说。对于制表符e。为0和e.keyCode为9(应为)。在FF 3.5.16,jQuery 1.6.2中测试。
johndodo 2011年


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

2
另外,要取消默认操作,请使用e.preventDefault();。在函数的第一行。
乔什·莱兹尔

@Jon,按键无法捕获IE中的非字符键
Marc

@Marc我看到了,我如何与IE和FF兼容?
乔恩·埃里克森

4
^^具有讽刺意味的是... jQuery应该弥合浏览器之间的鸿沟,因此您不必担心类似的事情。
Jagd

@ Jagd,jQuery无法推断意图。有充分的理由,按键和按键按下是不等效的。碰巧的是,这种情况不需要区别。
马克

7

上面显示的方法对我不起作用,可能是我正在使用旧的jquery,然后终于下面显示的代码段适用于-发布以防万一有人在我的同一个位置

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

5

使用选项卡上的向下键的重要部分是知道选项卡将始终尝试做某事,不要忘了最后“返回假”。

这是我所做的。我有一个在.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()后,它对我有用;如果
LowFieldTheory

-1

这为我工作:

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.