jQuery Event Keypress:按下了哪个键?

2020/09/21 21:41 · javascript ·  · 0评论

使用jQuery,如何确定绑定到keypress事件时按下了哪个键?

$('#searchbox input').bind('keypress', function(e) {});

我想在ENTER按下时触发提交

[更新]

即使我找到了(或者更好:一个)自己回答,似乎还有一些变化的空间;)

有没有之间的差异keyCodewhich-尤其是如果我只是在寻找ENTER,这永远不会是一个unicode关键?

某些浏览器是否提供一种属性,而其他浏览器提供另一种属性?

其实这更好:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }

试试这个

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});

如果您使用的是jQuery UI,则可以翻译常见的键代码。ui / ui / ui.core.js中

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

在tests / simulate / jquery.simulate.js中也有一些翻译,但是我在核心JS库中找不到任何翻译。提醒您,我只是参考了来源。也许还有其他方法可以摆脱这些魔术数字。

您还可以使用String.charCodeAt和.fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true

假设您使用的是jQuery,则应绝对使用.which。是的,不同的浏览器设置了不同的属性,但是jQuery将对其进行规范化并分别设置.which值。请参阅http://api.jquery.com/keydown/上的文档,其中指出:

为了确定按下了哪个键,我们可以检查传递给处理函数的事件对象。虽然浏览器使用不同的属性来存储此信息,但jQuery规范化了.that属性,因此我们可以可靠地使用它来检索键码。

...此示例阻止了表单提交(通常是捕获按键#13的基本意图):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});

编辑:这仅适用于IE ...

我意识到这是一个过时的帖子,但是有人可能会觉得有用。

键事件是映射的,因此除了使用键代码值之外,您还可以使用键值使它更具可读性。

$(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

这是一份备忘单,其中包含我从此博客获得的映射密钥
在此处输入图片说明

 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });

检出出色的jquery.hotkeys插件,它支持组合键:

$(document).bind('keydown', 'ctrl+c', fn);

这几乎是keyCodes的完整列表:

3: "break",
8: "backspace / delete",
9: "tab",
12: 'clear',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
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",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: '!',
163: "#",
164: '$',
165: 'ù',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: '*',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"
$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

希望这对您有帮助!!!

好吧,我是瞎子:

e.which

将包含密钥的ASCII码。

参见https://developer.mozilla.org/En/DOM/Event.which

这是各种浏览器行为的简要描述,网址为http://unixpapa.com/js/key.html

我将在这一行中补充解决方案代码e.preventDefault();在表单输入字段的情况下,我们不按Enter键来提交

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }

添加隐藏的提交,而不是隐藏类型,只需使用style =“ display:none”简单提交即可。这是一个示例(从代码中删除了不必要的属性)。

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

它将接受本机输入密钥,无需JavaScript,可在每种浏览器中使用。

这是一个jQuery扩展,它将处理被按下的回车键。

(function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

一个有效的示例可以在这里找到
http://jsfiddle.net/EnjB3/8/

巫婆 ;)

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

演示:http : //jsfiddle.net/molokoloco/hgXyq/24/

使用event.key和现代JS!

没有数字代码了。您可以直接检查密钥。例如"Enter""LeftArrow""r",或"R"

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Mozilla文件

支持的浏览器

$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

您应该有firbug才能在控制台中看到结果

一些浏览器使用keyCode,其他浏览器使用keyCode。如果您使用的是jQuery,则可以可靠地使用jQuery标准化的东西。其实,

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});

根据Kilian的回答:

如果仅输入按键很重要:

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>

我最简单的方法是:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});

我刚刚制作了一个用于jQuery的插件,该插件允许更轻松的keypress事件。无需查找数字并将其放入,您所需要做的就是:

如何使用它

  1. 包括我下面的代码
  2. 运行此代码:
$(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

就这么简单。请注意,theKeyYouWantToFireAPressEventFor不是一个数字,而是一个字符串(例如,"a"当火A被按下时,"ctrl"火灾时按下,或者,在一个号码,只的情况下,暂无报价。如果这将火被按下。)CTRL (control)11

示例/代码:

因为长版本太长了……好……很长,我为此做了一个PasteBin链接:http ://pastebin.com/VUaDevz1

event.keyCodeevent.which被depracated。请参阅上面的@Gibolt答案或查看文档:https : //developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent

event.key 应该代替

keypress事件也被取消了:https
//developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

试试这个:

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
本文地址:http://javascript.askforanswer.com/jquery-event-keypressanxialenagejian.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!