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

Posted 2023-05-07

【中文标题】jQuery：如何在文本框中捕获 TAB 按键

【英文标题】：jQuery: How to capture the TAB keypress within a Textbox

【发布时间】：2010-11-21 19:35:03

【问题描述】：

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

【参考方案1】：

编辑： 由于您的元素是动态插入的，因此您必须在示例中使用 delegated on()，但您应该将其绑定到 keydown 事件，因为作为 @Marc cmets，在 IE 中keypress 事件不捕获非字符键：

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

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

查看示例here。

【讨论】：

当我在 IE6+ 中按下 TAB 时，事件不会触发（但它会在任何字母数字键上触发）...我需要使用 .live('keypress', fn)

如果只适用于现场，也许你正在动态插入你的文本框元素，如果元素已经在页面上，它会工作，检查这个例子：jsbin.com/oguhe

是的，文本框是动态插入的。我的 id #textbox 示例只是为了简化问题 =)

@Jon，您不使用 $(selector).live("keydown", fn) 的原因是？ CMS 建议使用 keydown，因为在 IE 中，keypress 不适用于非字符键（例如 Tab）

@AppleGrew：是这样说的，但事实并非如此——至少对于按键而言。对于 Tab e.which 为 0 而 e.keyCode 为 9（应该如此）。在 FF 3.5.16、jQuery 1.6.2 中测试。

【参考方案2】：

jQuery 1.9 中的工作示例：

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

【讨论】：

使e.preventDefault(); 加倍以防止在文本框中插入空格。

【参考方案3】：

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

【讨论】：

另外，要取消默认操作，请使用 e.preventDefault();在函数的第一行。

@Jon，按键不会捕获 IE 中的非字符键

@Marc 我明白了，如何兼容IE和FF？

^^ 具有讽刺意味的是...... jQuery 应该是在浏览器之间架起一座桥梁，这样你就不必担心这样的事情了。

@Jagd，jQuery 无法推断意图。 keypress 和 keydown 是不等价的，这是有充分理由的。恰巧，这种情况不需要区分。

【参考方案4】：

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

$('#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");
            
        
    );

【参考方案6】：

试试这个：

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

【参考方案7】：

假设您有 Id 为 txtName 的 TextBox

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

【参考方案8】：

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

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

【讨论】：

添加 evt.preventDefault(); 后对我有用在如果

【参考方案9】：

这对我有用：

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