代码之家  ›  专栏  ›  技术社区  ›  Marcelo Cantos

jQuery事件按键:按下了哪个键?

  •  688
  • Marcelo Cantos  · 技术社区  · 16 年前

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

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

    我想在什么时候触发提交 压力很大。

    [更新]

    两者之间有区别吗 keyCode which -特别是如果我只是在找 进来 ,它将永远不会是unicode密钥?

    23 回复  |  直到 8 年前
        1
  •  861
  •   Wolph    11 年前

    其实这样比较好:

     var code = e.keyCode || e.which;
     if(code == 13) { //Enter keycode
       //Do something
     }
    
        2
  •  136
  •   Vladimir Prudnikov    16 年前

    试试这个

    $('#searchbox input').bind('keypress', function(e) {
        if(e.keyCode==13){
            // Enter pressed... do anything here...
        }
    });
    
        3
  •  61
  •   Samuel Katz Jon Skeet    8 年前

    如果您使用的是jQueryUI,那么您就有通用键代码的翻译。在里面 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
    
        4
  •  41
  •   Frank Schwieterman    14 年前

    既然您正在使用jQuery,那么绝对应该使用.which。是的,不同的浏览器设置不同的属性,但是jQuery将规范化它们,并在每种情况下设置.which值。见 http://api.jquery.com/keydown/ 它说:

    为了确定按下了哪个键,我们可以检查传递给处理程序函数的事件对象。当浏览器使用不同的属性来存储这些信息时,jQuery规范化了.which属性,以便我们可以可靠地使用它来检索密钥代码。

        5
  •  32
  •   Matt Browne    11 年前

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

    $('input#search').keypress(function(e) {
      if (e.which == '13') {
         e.preventDefault();
         doSomethingWith(this.value);
       }
    });
    
        6
  •  28
  •   Kevin    11 年前

    编辑:这只适用于IE。。。

    我意识到这是一个老帖子,但有人可能会发现这很有用。

    键事件是映射的,因此您可以使用键值使其更具可读性,而不是使用keycode值。

    $(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
        }
    });
    

    这是一张备忘单,上面有我从这里得到的映射密钥 blog enter image description here

        7
  •  28
  •   Luca Filosofi    9 年前
     // 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');
         }
     });
    
        8
  •  21
  •   Bob Stein    8 年前

    jquery.hotkeys plugin

    $(document).bind('keydown', 'ctrl+c', fn);
    
        9
  •  17
  •   Ivan    7 年前

    这几乎是完整的键码列表:

    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"
    
        10
  •  14
  •   rajakvk rajakvk    15 年前
    $(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();
        });
    });
    

        11
  •  7
  •   Phil    14 年前

    下面详细描述了各种浏览器的行为 http://unixpapa.com/js/key.html

        12
  •  7
  •   jakubde Lutz Prechelt    3 年前
        13
  •  5
  •   dzona    12 年前

    我将用这行代码补充解决方案代码 e.preventDefault(); 如果是表单的输入字段,按enter键时我们不参与提交

    var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 13) { //Enter keycode
       e.preventDefault();
       //Do something
     }
    
        14
  •  5
  •   Community raghavsood33    4 年前

    使用 event.key

    不再你可以直接检查钥匙。例如 "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 Docs

    Supported Browsers

        15
  •  4
  •   Pedja    13 年前

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

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

    它将以本机方式接受enter键,不需要JavaScript,在每个浏览器中都可以使用。

        16
  •  4
  •   Reid Evans    12 年前

    这里有一个jquery扩展,它将处理按下的enter键。

    (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/

        17
  •  4
  •   molokoloco    11 年前

    女巫;)

    /*
    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/

        18
  •  3
  •   B. Bilgin    12 年前
    $(document).bind('keypress', function (e) {
        console.log(e.which);  //or alert(e.which);
    
    });
    

    您应该使用firbug在控制台中查看结果

        19
  •  3
  •   Hitesh Modha    9 年前

    一些浏览器使用键码,而另一些浏览器使用键码。如果您使用的是jQuery,那么就可以可靠地使用它,因为jQuery使事情标准化。事实上

    $('#searchbox input').bind('keypress', function(e) {
        if(e.keyCode==13){
    
        }
    });
    
        20
  •  2
  •   user669677 user669677    13 年前

    如果 只进

    <form action="javascript:alert('Enter');">
    <input type=text value="press enter">
    </form>
    
        21
  •  2
  •   Chadwick    13 年前

    $("#element").keydown(function(event) {
        if (event.keyCode == 13) {
            localiza_cep(this.value);
        }
    });
    
        22
  •  2
  •   Zach Barham    9 年前

    keypress 事件。您不必查找号码并输入,只需执行以下操作:

    如何使用它

    1. 包括我下面的代码
    $(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" 控制键 (控制) 1 ,没有引用。那会在 1.

    示例/代码:

    function getPressedKey(e){var a,s=e.keyCode||e.which,c=65,r=66,o=67,l=68,t=69,f=70,n=71,d=72,i=73,p=74,u=75,h=76,m=77,w=78,k=79,g=80,b=81,v=82,q=83,y=84,j=85,x=86,z=87,C=88,K=89,P=90,A=32,B=17,D=8,E=13,F=16,G=18,H=19,I=20,J=27,L=33,M=34,N=35,O=36,Q=37,R=38,S=40,T=45,U=46,V=91,W=92,X=93,Y=48,Z=49,$=50,_=51,ea=52,aa=53,sa=54,ca=55,ra=56,oa=57,la=96,ta=97,fa=98,na=99,da=100,ia=101,pa=102,ua=103,ha=104,ma=105,wa=106,ka=107,ga=109,ba=110,va=111,qa=112,ya=113,ja=114,xa=115,za=116,Ca=117,Ka=118,Pa=119,Aa=120,Ba=121,Da=122,Ea=123,Fa=114,Ga=145,Ha=186,Ia=187,Ja=188,La=189,Ma=190,Na=191,Oa=192,Qa=219,Ra=220,Sa=221,Ta=222;return s==Fa&&(a="numlock"),s==Ga&&(a="scrolllock"),s==Ha&&(a="semicolon"),s==Ia&&(a="equals"),s==Ja&&(a="comma"),s==La&&(a="dash"),s==Ma&&(a="period"),s==Na&&(a="slash"),s==Oa&&(a="grave"),s==Qa&&(a="openbracket"),s==Ra&&(a="backslash"),s==Sa&&(a="closebracket"),s==Ta&&(a="singlequote"),s==B&&(a="ctrl"),s==D&&(a="backspace"),s==E&&(a="enter"),s==F&&(a="shift"),s==G&&(a="alt"),s==H&&(a="pause"),s==I&&(a="caps"),s==J&&(a="esc"),s==L&&(a="pageup"),s==M&&(a="padedown"),s==N&&(a="end"),s==O&&(a="home"),s==Q&&(a="leftarrow"),s==R&&(a="uparrow"),s==S&&(a="downarrow"),s==T&&(a="insert"),s==U&&(a="delete"),s==V&&(a="winleft"),s==W&&(a="winright"),s==X&&(a="select"),s==Z&&(a=1),s==$&&(a=2),s==_&&(a=3),s==ea&&(a=4),s==aa&&(a=5),s==sa&&(a=6),s==ca&&(a=7),s==ra&&(a=8),s==oa&&(a=9),s==Y&&(a=0),s==ta&&(a=1),s==fa&&(a=2),s==na&&(a=3),s==da&&(a=4),s==ia&&(a=5),s==pa&&(a=6),s==ua&&(a=7),s==ha&&(a=8),s==ma&&(a=9),s==la&&(a=0),s==wa&&(a="times"),s==ka&&(a="add"),s==ga&&(a="minus"),s==ba&&(a="decimal"),s==va&&(a="devide"),s==qa&&(a="f1"),s==ya&&(a="f2"),s==ja&&(a="f3"),s==xa&&(a="f4"),s==za&&(a="f5"),s==Ca&&(a="f6"),s==Ka&&(a="f7"),s==Pa&&(a="f8"),s==Aa&&(a="f9"),s==Ba&&(a="f10"),s==Da&&(a="f11"),s==Ea&&(a="f12"),s==c&&(a="a"),s==r&&(a="b"),s==o&&(a="c"),s==l&&(a="d"),s==t&&(a="e"),s==f&&(a="f"),s==n&&(a="g"),s==d&&(a="h"),s==i&&(a="i"),s==p&&(a="j"),s==u&&(a="k"),s==h&&(a="l"),s==m&&(a="m"),s==w&&(a="n"),s==k&&(a="o"),s==g&&(a="p"),s==b&&(a="q"),s==v&&(a="r"),s==q&&(a="s"),s==y&&(a="t"),s==j&&(a="u"),s==x&&(a="v"),s==z&&(a="w"),s==C&&(a="x"),s==K&&(a="y"),s==P&&(a="z"),s==A&&(a="space"),a}
    
    $(document).keydown(function(e) {
      $("#key").text(getPressedKey(e));
      console.log(getPressedKey(e));
      if (getPressedKey(e)=="space") {
        e.preventDefault();
      }
      if (getPressedKey(e)=="backspace") {
        e.preventDefault();
      }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p>The Pressed Key: <span id=key></span></p>


    http://pastebin.com/VUaDevz1

        23
  •  2
  •   4esn0k    3 年前
        24
  •  -9
  •   Peter Mortensen Femaref    13 年前

    试试这个:

    jQuery('#myInput').keypress(function(e) {
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) {
            alert('You pressed enter!');
        }
    });