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

IT技术 javascript jquery
2021-02-20 13:11:36

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

6个回答

编辑:由于您的元素是动态插入的,您必须在示例中使用委托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
  } 
});

在此处查看示例

@AppleGrew:是的,是的,但事实并非如此-至少对于按键而言。对于 Tab e.which 是 0 和 e.keyCode 是 9(应该是)。在 FF 3.5.16、jQuery 1.6.2 中测试。
2021-05-03 13:11:36
当我在 IE6+ 中按下 TAB 时,事件不会触发(尽管它会触发任何字母数字键)...我需要使用 .live('keypress', fn)
2021-05-13 13:11:36
是的,文本框是动态插入的。我的 id #textbox 示例只是为了简化问题 =)
2021-05-17 13:11:36
@Jon,您不使用 $(selector).live("keydown", fn) 的原因是?CMS 建议使用 keydown,因为在 IE 中,keypress 对非字符键不起作用(例如 Tab)
2021-05-19 13:11:36
如果仅适用于 live,也许您正在动态插入文本框元素,如果该元素已在页面上,则可以使用,请查看此示例:jsbin.com/oguhe
2021-05-20 13:11:36

jQuery 1.9 中的工作示例:

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});
make e.preventDefault();double 以防止在文本框中插入空格。
2021-05-18 13:11:36
$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});
@Jon,按键不会捕获 IE 中的非字符键
2021-04-30 13:11:36
@Jagd,jQuery 无法推断意图。keypress 和 keydown 不是等价的,这是有充分理由的。碰巧,这种情况不需要区分。
2021-05-03 13:11:36
^^ 讽刺的是... jQuery 应该弥合浏览器之间的差距,这样你就不必担心这样的事情。
2021-05-06 13:11:36
另外,要取消默认操作,请使用 e.preventDefault(); 在函数的第一行。
2021-05-11 13:11:36
@Marc 我明白了,我怎样才能与 IE 和 FF 兼容?
2021-05-14 13:11:36

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

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

在 tab 上按下键的一个重要部分是知道 tab 总是会尝试做一些事情,不要忘记在最后“返回 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");
            }
        }
    });