Tastendruck mit jQuery simulieren


79

Wie kann ich mit jQuery eine KeyPress simulieren (auslösen?), Wenn auf einen Link geklickt wird? Zum Beispiel, wenn ein Benutzer auf den folgenden Link klickt:

<a id="clickforspace" href="#">Click Here</a>

Wenn Sie dann auf den Link klicken, ist es so, als würden sie die "Leertaste" auf ihrer Tastatur drücken.

So etwas nehme ich an:

$("#clickforspace").click(function(e) { 
    e.preventDefault(); 
    //... Some type of code here to initiate "spacebar" //
                                      });

Irgendwelche Ideen, wie dies erreicht werden kann?


2
Dies könnte Ihre Frage beantworten.
Themis

Ich bin neugierig - als Sie versuchten, durch eine clickLeertaste zu ersetzen , wollten Sie eigentlich, dass der Browser auf der Seite nach unten scrollt? Das Drücken der Leertaste auf einem Link hat normalerweise den gleichen Effekt wie das Drücken der Bild-ab-Taste.
Joel Purra

Antworten:


16

Das Tastendruckereignis von jQuery soll diese Art von Arbeit erledigen. Sie können das Ereignis auslösen, indem Sie eine Zeichenfolge "keypress" an .trigger () übergeben. Um genauer zu sein, können Sie jedoch auch ein jQuery.Event-Objekt übergeben (geben Sie den Typ als "Tastendruck" an) und alle gewünschten Eigenschaften angeben, z. B. den Schlüsselcode als Leertaste.

http://docs.jquery.com/Events/trigger#eventdata

Lesen Sie die obige Dokumentation für weitere Details.


50
Sicher, lesen Sie die Dokumentation, aber das Poster wusste das wahrscheinlich schon. Die Dokumentation zu jQuery-Ereignissen ist etwas undurchsichtig. Andrew Culver gab eine direkte Antwort sowie eine Referenz für weitere Informationen.
Roy Leban

140

Ich glaube, das ist es, wonach Sie suchen:

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 40;
$("whatever").trigger(press);

Von hier aus .


17
Dies erzeugt keinen tatsächlichen Text, wenn es beispielsweise mit der Eingabesteuerung verwendet wird.
Alex Burtsev

5
@AlexBurtsev - Sie haben Recht, das liegt daran, dass dies den Ereignishandler nur so auslöst, als ob die angegebene Taste gedrückt worden wäre, aber diese Taste nicht tatsächlich drückt, wie es passiert, wenn eine Taste auf der Tastatur gedrückt wird (wahrscheinlich aus Sicherheitsgründen)
BornToCode

6
Gibt es einen Grund, warum Sie '$' und 'jQuery' vermischen?
Danny Andrews

4
Was Sie geschrieben haben, hat in jQuery 2.2.3 auf Chrome nicht funktioniert. :( Aber das tat:$("whatever").trigger($.Event("keydown", {keyCode: 40}))
Jonathan Benn

1
Aufbauend auf der Methode von Jonathan Benn können Sie den Schlüssel auch auf dieselbe Weise senden, anstatt einen Schlüsselcode zu senden (da Schlüsselcodes als veraltet markiert sind). Zum Beispiel: $ ("was auch immer"). Trigger ($. Event ("keyup", {key: "Enter"})) - und optional, wie gezeigt, mit verschiedenen Tastaturereignissen.
Alan M.


12

Sie können dieses SendKeys jQuery-Plugin ausprobieren:

http://bililite.com/blog/2011/01/23/improved-sendkeys/

$(element).sendkeys(string)Fügt eine Zeichenfolge an der Einfügemarke in eine Eingabe, einen Textbereich oder ein anderes Element mit contenteditable = true ein. Wenn sich die Einfügemarke derzeit nicht im Element befindet, merkt sie sich, wo sich die Einfügemarke befand, als sendkeys zuletzt aufgerufen wurde (wenn sich die Einfügemarke nie im Element befand, wird sie an das Ende angehängt).


Sie benötigen jQuery nicht, um dies zu verwenden. Sie können dieselbe Funktionalität verwenden, indem Sie einfach die bililiteRangeBibliothek abrufen : github.com/dwachss/bililiteRange (tatsächlich ist das jQuery-Plugin nur ein dünner Wrapper um diese unglaubliche Bibliothek, die für sich allein steht ).
Fiatjaf

5

Das funktioniert:

var event = jQuery.Event('keypress');
event.which = 13; 
event.keyCode = 13; //keycode to trigger this for simulating enter
jQuery(this).trigger(event); 

1
[var event = jQuery.Event ('Tastendruck'); event.which = 13; event.keyCode = 13; jQuery (this) .trigger (event);] versuche dies
Anoop PS

Ich musste klicken in einem Dialog eingeben, so mit dem Schnipsel hier, ich ersetzt dies mit #myEl .. Danke
Genen Bo
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.