740 Stimmen

jQuery Event Keypress: Welche Taste wurde gedrückt?

Mit jQuery, wie finde ich heraus, welche Taste gedrückt wurde, wenn ich an das keypress-Ereignis binden?

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

Ich möchte eine Übermittlung auslösen, wenn ENTER gedrückt wird.

[Update]

Auch wenn ich die (oder besser: eine) Antwort selbst gefunden habe, scheint es einen gewissen Spielraum für Variationen zu geben ;)

Gibt es einen Unterschied zwischen keyCode y which - vor allem, wenn ich nur auf der Suche nach ENTER der niemals ein Unicode-Schlüssel sein wird?

Bieten einige Browser die eine Eigenschaft und andere die andere?

2voto

Laut der Antwort von Kilian:

Wenn nur eingeben Tastendruck ist wichtig:

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

2voto

Zach Barham Punkte 447

Ich habe gerade ein Plugin für jQuery erstellt, das eine einfachere keypress Veranstaltungen. Anstatt die Nummer zu suchen und sie einzugeben, müssen Sie nur Folgendes tun:

Wie man es benutzt

  1. Fügen Sie den unten stehenden Code ein
  2. Führen Sie diesen Code aus:

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

So einfach ist das. Bitte beachten Sie, dass theKeyYouWantToFireAPressEventFor ist nicht eine Zahl, sondern eine Zeichenkette (z. B. "a" zu schießen, wenn A gedrückt wird, "ctrl" zu schießen, wenn CTRL <em>(control)</em> gedrückt wird, oder, im Falle einer Zahl, einfach 1 , keine Anführungszeichen. Das würde feuern, wenn 1 gedrückt wird.)

Das Beispiel/Code:

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>

Weil die lange Version so... nun ja... lang ist, habe ich einen PasteBin-Link dafür erstellt:
http://pastebin.com/VUaDevz1

2voto

bakrall Punkte 309

Le site event.keyCode y event.which sind veraltet. Siehe @Gibolts Antwort oben oder die Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

event.key sollte stattdessen verwendet werden

keypress Ereignis ist ebenfalls veraltet: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

-9voto

Omar Yepez Punkte 33

Versuchen Sie dies:

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

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X