Heim > Web-Frontend > js-Tutorial > Hauptteil

Tastaturereignisse von jQuery-Ereignissen (Strg-Eingabetaste zum Absenden des Formulars usw.)_jquery

WBOY
Freigeben: 2016-05-16 16:48:46
Original
1325 Leute haben es durchsucht

Tastaturereignisse verarbeiten alle Tastenanschläge des Benutzers, unabhängig davon, ob sie sich innerhalb oder außerhalb des Texteingabebereichs befinden. Der Umfang von Tastaturereignissen ist in verschiedenen Browsern unterschiedlich. Im Allgemeinen kann diese Art von Tastaturereignissen auf Elemente wie Formularelemente, Tag-Elemente, Fenster und Dokumente wirken. Tastaturereignisse können auf allen Elementen ausgelöst werden, die Schnittpunkte erhalten können. Elemente, zu denen bei Verwendung der Tabulatortaste gesprungen werden kann, sind Elemente, die Tastaturereignisse verwenden können (wenn tabindex nicht festgelegt ist). für diese Elemente) Wenn bei Attributwerten tabindex auf eine negative Zahl gesetzt ist, wird der Fokus bei Verwendung der Tab-Taste nicht erreicht.

Tastaturereignisse können ein Parameterereignis übergeben. Dieses Ereignis ist ein Objekt, das einige Eigenschaften enthält, die Sie abrufen können Einige Informationen zum Ereignis. Wenn Sie beispielsweise die Tastatur verwenden, können Sie event.keyCode verwenden, um den ASCII-Codewert der gedrückten Taste abzurufen. Siehe unten

1: Das keydown()-Ereignis ist das erste Tastaturereignis, das beim Klicken auf die Tastatur ausgelöst wird. Wenn der Benutzer die Taste weiterhin gedrückt hält, wird das keydown-Ereignis fortgesetzt.

Code kopieren Der Code lautet wie folgt:

$('input').keydown( function(event ){
          warning(event.keyCode); 
          });
Mehr Kontrolle über diese Elemente kann durch die von der Tastatur zurückgegebenen Werte erreicht werden, z. B. die Auf-, Ab-, Links- und Rechts-Tasten: 38, 40, 37, 39.
2: Das Ereignis „keypress()“ ähnelt dem Ereignis „keydown“, mit einer Ausnahme. Wenn Sie das Standardverhalten der Taste verhindern müssen, müssen Sie das Ereignis „keypress“ verwenden.

3: Das Ereignis „keyup()“ ist das letzte Ereignis, das auftritt (nach dem Ereignis „keydown“). Im Gegensatz zum Ereignis „keydown“ wird dieses Ereignis nur einmal ausgelöst, wenn die Tastatur losgelassen wird (da das Loslassen der Tastatur kein kontinuierlicher Zustand ist). .

Code kopieren Der Code lautet wie folgt: $('input').keyup( funciton() {
         warning('keyup function is run!!');
          });



4: In jQuery werden Keydown-, Keypress- und Keyup-Ereignisse in einer bestimmten Reihenfolge ausgeführt.

Code kopieren Der Code lautet wie folgt: $('input').keyup( function() {
              console.log('keyup');
         } );
Die Ausführungsergebnisse sind: Tastendruck, Tastendruck.
Der Grund, warum Warnung hier nicht verwendet wird, liegt darin, dass das Auftreten einiger Ereignisse während der Warnung verhindert wird Wenn Sie mit diesem Code experimentieren möchten, können Sie ihn unter Firefox ausführen. Dazu muss das Firebug-Plugin im Browser installiert sein. Installieren Sie es bedenkenlos, denn Firefox ist ein Open-Source-Browser. Vertrauen Sie Open-Source-Software.

jQuery verfügt über drei Funktionen zur Verarbeitung von Tastaturereignissen, entsprechend der Reihenfolge, in der die Ereignisse auftreten:





Code kopieren

Der Code lautet wie folgt:

keydown();

keyup( );

keypress();

keydown()

Das Keydown-Ereignis wird ausgelöst, wenn die Tastatur gedrückt wird. Sie können in der gebundenen Funktion false zurückgeben, um zu verhindern, dass das Standardereignis des Browsers ausgelöst wird.

keyup()

Das Keyup-Ereignis wird ausgelöst, wenn die Taste losgelassen wird, also das Ereignis, nachdem Sie die Tastatur gedrückt und aufgestanden sind

Tastendruck()

Das Tastendruckereignis wird ausgelöst, wenn eine Taste angetippt wird. Wir können es als Drücken und Anheben derselben Taste verstehen

Wie können wir herausfinden, ob ich die A-, Z- oder Enter-Taste gedrückt habe?

Tastaturereignisse können ein Parameterereignis übergeben. Tatsächlich können einige jQuery-Ereignisfunktionen einen solchen Parameter übergeben.

Code kopieren Der Code lautet wie folgt:
$('input').keydown( function(event ){
alert(event.keyCode);
});

Im obigen Code kann uns event.keyCode dabei helfen, herauszufinden, welche Taste wir gedrückt haben. Es gibt den ASCII-Code zurück, z. B. die Aufwärts-, Abwärts-, Links- und Rechtstaste, die jeweils 38, 40, 37 und 39 sind

Wenn wir Strg-Eingabe implementieren möchten, ist es Strg-Eingabe, um das Formular abzusenden

Code kopieren Der Code lautet wie folgt:
$(document).keypress(function( e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})

Weitere Referenzinformationen:

Vorkenntnisse

1. Schlüsselwert Nummer 0 48. Schlüsselwert Nummer 9 97. Schlüsselwert Z 122. Schlüsselwert Z 90 43;-Schlüsselwert 45;.Schlüsselwert 46;Rücktaste 8;Tab-Schlüsselwert 9;

4.event ist im IE global und in Firefox ein temporäres Objekt, und Parameter müssen übergeben werden


jQuery.extend( {
/*========================================== ==== ===========================
Funktionsbeschreibung: Wert des Schlüssels abrufen
Aufrufmethode:
jQuery.getKeyNum (event);
*/
getKeyNum:function(e){
var keynum; if(window.event){ // IE
keynum = event .keyCode;
}
else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
},
/*== ========================================== ====== ======================
Funktionsbeschreibung: Bestimmen Sie, ob es sich um eine Ganzzahl handelt, beschränken Sie das Bearbeitungsfeld auf die Eingabe von Zahlen
Aufrufmethode:
Zu lösende Probleme:
Die Tabulatortaste funktioniert nicht firefox.
*/
isInt. :function(e){
var keynum = this.getKeyNum(e);
if(keynum >= 48 && keynum <= 57 || keynum == 8){//Rücktaste in Firefox-Urteil 8 erforderlich
return true;
}
return false
},
/*========== =========== ===================================== ========== ===
Funktionsbeschreibung: Bestimmen Sie, ob es sich um eine Dezimalzahl handelt.
Aufrufmethode:
< input type="text" onkeypress="return jQuery. .isFloat(this,event);" /> (e);
if(keynum == 46){//Dezimalpunkt eingeben
if(txt.value.length == 0){
return false; value.indexOf('.') >= 0) {
return false;
}else{
return true; )){
return true;
}
return false;
}
});


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage