jQuery：如何捕获文本框中的 TAB 按键

Question

我想捕获TAB按键，取消默认操作并调用我自己的javascript函数。

Answer 1

编辑：由于您的元素是动态插入的，因此您必须像示例中那样使用委托

on()

，但您应该将其绑定到 keydown 事件，因为正如 @Marc 评论，在 IE 中 keypress 事件不会t 捕获非字符键：

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

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

查看示例此处。

Answer 2

jQuery 1.9 中的工作示例：

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

Answer 3

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

Answer 4

上面显示的方法对我不起作用，可能是我使用的是旧的 jquery，最后下面显示的代码片段适用于 - 发布以防万一有人处于我相同的位置

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

Answer 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");
            }
        }
    });

Answer 6

试试这个：

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

Answer 7

假设您有 ID 为 txtName 的 TextBox

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

Answer 8

您可以使用 this JQuery API 捕获事件选项卡。

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

Answer 9

keyCode

和

Which

均已弃用。不再推荐它们。请使用

key

来代替。

带有 Tab 的示例

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  if (e.key === "Tab") { 
    e.preventDefault(); 
    // call custom function here
  } 
});

注意

e.key

是一个浏览器 API，无需 JQuery 即可工作

• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

Answer 10

这对我有用：

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