使用jQuery触发按键事件的明确方法


260

我已经阅读了有关此问题的所有答案,但似乎没有一种解决方案有效。

另外,我感觉到用特殊字符触发按键根本不起作用。有人可以验证谁做了吗?


14
不,您会想念这个概念的。这不是应该如何工作的。触发器将仅调用事件处理程序。它实际上不会打印密钥。如果要模拟打印键的效果,则只需将键添加到输入值并同时触发事件。
Nadia Alramli 09年

有趣的是,我不知道。在这种情况下,您能告诉我触发事件是否也会为非jquery库触发吗?例如,如果我在纯JS中设置了onKeydown,它将捕获我的“假”事件吗?
mkoryak 2009年

2
是的,如果在纯js中设置了onkeydown ='...'。它将由假事件触发。我不确定。但是我进行了一次快速测试,并成功了。
Nadia Alramli,2009年

2
@Nadia谢谢!我已经阅读了所有答案,想知道为什么事情在我的期望不正确之前就无法正常工作。我怀疑很多其他人也会有同样的误解。
mikemaccana 2012年

3
两年后...阅读该页面,似乎确定的方法是:$('input#search')。trigger($。Event('keydown',{which:$。ui.keyCode.ENTER,keyCode:$ .ui.keyCode.ENTER}));
molokoloco 2012年

Answers:


365

如果您想触发按键或按键事件,那么您要做的就是:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);

42
问题是如何触发,而不是如何捕获
乍得·格兰特

2
我添加了一个例子,用于触发事件
纳迪亚Alramli

4
很好的答案。值得注意的是,jQuery.Event可用于jQuery 1.3或更高版本。它在以下问题中变得相关:stackoverflow.com/questions/1823617/…–
artlung

8
这不适用于jQuery UI滑块。我必须像下面的OreiA的回答一样设置e.keyCode。
crizCraig 2011年

2
FWIW,我有我的应用程序“KEYUP”更成功
标志

81

现在,使用jQuery 1.6+会更加简洁:

var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } );

$('input').trigger(e);

(如果您不使用jQuery UI,请改用相应的键代码。)


4
只要记住也要用“ keyCode”代替“ which”。
理查德·尼纳伯

是的,您必须定义哪个和keyCode才是安全的(如果事件侦听器检查e.keyCode,则只有在创建jQuery.Event对象时定义keyCode才能起作用)
jackocnr

1
jQuery规范化了哪个/ keyCode,因此将两者都放入。
奈杰尔·安吉尔

+1:指向api.jquery.com的链接;和目前的jQuery版本不正常化其中/键代码,所以你应该为安全提供两种
维克托

2
@SamuelLindblom我应该写得更清楚一些:jQuery不规范通过传递的事件属性.trigger(jQuery.Event('name', props))。看示例jsfiddle.net/9ggmrbpd/1-触发事件的属性按原样传递。源代码:github.com/jquery/jquery/blob/master/src/event.js#L739
Victor

68

真正的答案必须包含keyCode:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
e.keyCode = 50
$("input").trigger(e);

即使jQuery的网站说which和keyCode都已规范化,但它们还是很容易出错。对e.which和e.keyCode进行标准的跨浏览器检查总是最安全的,在这种情况下,只需定义两者即可。


34
+1。顺便说一句,e.keyCode = e.which = 50;单行会更好。:)
Sk8erPeter

我只是发现仅使用keyCode是行不通的。必须同时设置两者才能使其正常工作
Tasos K. 2014年

@ Sk8erPeter除非是一场golph编码竞赛,否则不会这样
shabunc


5

我使它与keyup一起使用。

$("#id input").trigger('keyup');

3
在6年前的问题中,我也想设置键码,但不知道如何。
mkoryak

4

好的,对我来说,这个工作...

var e2key = function(e) {
    if (!e) return '';
    var event2key = {
        '96':'0', '97':'1', '98':'2', '99':'3', '100':'4', '101':'5', '102':'6', '103':'7', '104':'8', '105':'9', // Chiffres clavier num
        '48':'m0', '49':'m1', '50':'m2', '51':'m3', '52':'m4', '53':'m5', '54':'m6', '55':'m7', '56':'m8', '57':'m9', // Chiffres caracteres speciaux
        '65':'a', '66':'b', '67':'c', '68':'d', '69':'e', '70':'f', '71':'g', '72':'h', '73':'i', '74':'j', '75':'k', '76':'l', '77':'m', '78':'n', '79':'o', '80':'p', '81':'q', '82':'r', '83':'s', '84':'t', '85':'u', '86':'v', '87':'w', '88':'x', '89':'y', '90':'z', // Alphabet
        '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown' // KEYCODES
    };
    return event2key[(e.which || e.keyCode)];
};

var page5Key = function(e, customKey) {
    if (e) e.preventDefault();
    switch(e2key(customKey || e)) {
        case 'left': /*...*/ break;
        case 'right': /*...*/ break;
    }
};

$(document).bind('keyup', page5Key);

$(document).trigger('keyup', [{preventDefault:function(){},keyCode:37}]); 

2

如果您需要考虑当前的光标和文本选择...

这不适用于Chrome上的AngularJS应用。正如Nadia在原始评论中指出的那样,该字符在输入字段中永远不可见(至少,这是我的经验)。此外,以前的解决方案未考虑输入字段中当前的文本选择。我不得不使用一个很棒的库jquery-selection

我有一个自定义的屏幕数字小键盘,可以填写多个输入字段。我不得不...

  1. 重点关注,保存lastFocus.element
  2. 模糊时,保存当前文本选择(开始和停止)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. 当按下我的键盘上的按钮时:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})



1

可以像这样的文档来完成

$('input').trigger("keydown", {which: 50});

1
这似乎不起作用,因为它使用了extraParameters参数,该参数未在事件参数内设置任何内容,而是向事件处理程序回调中添加了额外的参数。
TimeWaster16年

1
不是有效的解决方案
Entwickler
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.