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

Posted

技术标签:

【中文标题】使用 jQuery 触发按键事件的确定方法【英文标题】:Definitive way to trigger keypress events with jQuery 【发布时间】:2010-10-24 08:11:49 【问题描述】:

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

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

【问题讨论】:

不,你错过了理解这个概念。这不是它应该如何工作的。 trigger 只会调用事件处理程序。它实际上不会打印密钥。如果要模拟打印key的效果,那么只要在输入值加上key,同时触发事件即可。 有趣,我不知道。在那种情况下,你能告诉我触发事件是否也会为非 jquery 库触发它。例如,如果我在纯 JS 中设置了 onKeydown,它会捕获我的“假”事件吗? 是的,如果在纯 js 中设置了 onkeydown='...'。它将由假事件触发。我不确定。但我做了一个快速测试,它奏效了。 @Nadia 谢谢!在意识到我的期望不正确之前,我已经阅读了所有答案,想知道为什么事情没有奏效。我怀疑很多其他人也会有同样的误解。 两年后...阅读页面似乎确定的方法是: $('input#search').trigger($.Event( 'keydown', which:$.ui .keyCode.ENTER, keyCode:$.ui.keyCode.ENTER)); 【参考方案1】:

如果你想触发 keypress 或 keydown 事件,那么你所要做的就是:

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

【讨论】:

问题是如何触发,而不是如何捕获 我添加了一个触发事件的例子 非常好的答案。值得注意的是,jQuery.Event 可用于 jQuery 1.3 或更高版本。它与这个问题相关:***.com/questions/1823617/… 这对我来说不适用于 jQuery UI 滑块。我必须像下面 OreiA 的回答一样设置 e.keyCode。 fwiw,我的应用程序使用“keyup”取得了更大的成功【参考方案2】:

如果你也在使用 jQuery UI,你可以这样做:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);

【讨论】:

e.which 似乎不适用于我的 jQuery UI 滑块。感谢您的回答。它确实有效。【参考方案3】:

好的,对我来说,使用这个...

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]); 

【讨论】:

【参考方案4】:

现在更简洁了with jQuery 1.6+:

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

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

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

【讨论】:

记得用 'keyCode' 代替 'which'。 是的,您必须定义哪个和 keyCode 是安全的(如果事件侦听器检查 e.keyCode,它只会在您在创建 jQuery.Event 对象时定义 keyCode 时起作用) jQuery 规范 which/keyCode 所以把任何一个都放进去。 +1 表示指向 api.jquery.com 的链接;并且当前的 jQuery 版本不规范 which/keyCode,所以你应该同时提供安全 @SamuelLindblom 我应该写得更清楚:jQuery 不会规范化通过.trigger(jQuery.Event('name', props)) 传递的事件属性。查看示例jsfiddle.net/9ggmrbpd/1 - 触发事件的属性按原样传递。源代码:github.com/jquery/jquery/blob/master/src/event.js#L739【参考方案5】:

真正的答案必须包括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 进行标准的跨浏览器检查总是最安全的,在这种情况下,只需定义两者即可。

【讨论】:

+1。顺便说一句,e.keyCode = e.which = 50; 在一行中会更好。 :) 我刚刚发现只使用keyCode 不起作用。必须同时设置才能使其工作 @Sk8erPeter 它不会,除非它是一个 golph 编码竞赛【参考方案6】:

console.log( String.fromCharCode(event.charCode) );

我猜不需要映射字符。

【讨论】:

【参考方案7】:

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

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

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

    在焦点上,保存 lastFocus.element

    在模糊时,保存当前文本选择(开始和停止)

    var pos = element.selection('getPos')
    lastFocus.pos =  start: pos.start, end: pos.end
    

    按下我的键盘上的按钮时:

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

【讨论】:

【参考方案8】:

我让它与 keyup 一起工作。

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

【讨论】:

在我6年前的问题中,我也想设置keycode,但不知道如何。【参考方案9】:

可以这样完成docs

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

【讨论】:

这似乎不起作用,因为它使用了 extraParameters 参数,它没有在事件参数中设置任何内容,而是向事件处理程序回调添加了额外的参数。 不是一个有效的解决方案【参考方案10】:

如果你想在一行中完成,你可以使用

$("input").trigger(jQuery.Event('keydown',  which: '1'.charCodeAt(0) ));

【讨论】:

以上是关于使用 jQuery 触发按键事件的确定方法的主要内容,如果未能解决你的问题,请参考以下文章

如何用js或jquery实现点击事件触发键盘

jQuery中keyup和keydown的应用? [复制]

jQuery监听键盘事件及相关操作使用

jquery 键盘事件 keypress() keydown() keyup()

jQuery的Event对象(实例)。

在jQuery中检测单个按键事件上的多个键