Zusammenfassung der Überwachung von Tastaturereignissen durch Vue

Wichtige Modifikatoren

Wenn wir auf Tastaturereignisse warten, müssen wir häufig nach einzelnen Tasten suchen. Mit Vue können Sie beim Abhören von Tastaturereignissen Tastenmodifikatoren zu v-on hinzufügen:

<!-- Rufen Sie `vm.submit()` nur auf, wenn `key` `Enter` ist -->
<input v-on:keyup.enter="Senden">

Sie können einfach jeden gültigen Tastennamen, der von KeyboardEvent.key angezeigt wird, in die Groß-/Kleinschreibung konvertieren, um ihn als Modifikator zu verwenden.

<input v-on:keyup.page-down="aufSeiteNachunten">

Um bei Bedarf ältere Browser zu unterstützen, stellt Vue Aliase für die gängigsten Tastencodes bereit:

• -eingeben
• - Registerkarte
• - Löschen (erfasst die Tasten „Entf“ und „Rücktaste“)
• -esc
• - Raum
• - hoch
• - runter
• -links
• - Rechts

Sie können Aliase für Tastenmodifikatoren auch über das globale Objekt config.keyCodes anpassen:

// Sie können „v-on:keyup.f1“ verwenden
Vue.config.keyCodes.f1 = 112

Systemmodifizierertasten

Mit den folgenden Modifikatoren kann ein Listener implementiert werden, der Maus- oder Tastaturereignisse nur auslöst, wenn die entsprechende Taste gedrückt wird.

• - .Strg
• - .alt
• - .Schicht
• - .meta

Tu etwas
Im Gegensatz zu Tastenaliasen muss bei der Verwendung von Modifikatortasten mit dem Keyup-Ereignis eine normale Taste gedrückt werden, wenn das Ereignis ausgelöst wird. Mit anderen Worten: Wenn Sie möchten, dass keyup.ctrl ausgelöst wird, müssen Sie andere Tasten loslassen, während Sie Strg gedrückt halten. Das einfache Loslassen von Strg löst das Ereignis nicht aus.

<!-- Zum Auslösen Alt drücken + C loslassen -->
<Eingabe @keyup.alt.67="löschen">
 
<!-- Ausgelöst durch Drücken von Alt + Loslassen einer beliebigen Taste-->
<input @keyup.alt="other"><!-- Wird beim Drücken von Strg + Eingabetaste ausgelöst--><input @keydown.ctrl.13="submit">

Für die ElementUI-Eingabe müssen wir am Ende .native hinzufügen, da ElementUI die Eingabe kapselt und native Ereignisse nicht funktionieren.

<input v-model="form.name" placeholder="Spitzname" @keyup.enter="Senden">

<el-input v-model="form.name" placeholder="Spitzname" @keyup.enter.native="submit"></el-input>

.exact Modifikator

Mit dem Modifikator .exact können Sie steuern, welche Ereignisse durch eine präzise Kombination von Systemmodifikatoren ausgelöst werden.

<!-- Dies wird auch ausgelöst, wenn Alt oder Umschalt gleichzeitig gedrückt werden -->
<button v-on:click.ctrl="onClick">A</button>

<!-- Wird nur ausgelöst, wenn Strg gedrückt wird-->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- Wird nur ausgelöst, wenn kein Systemmodifikator gedrückt wird-->
<button v-on:click.exact="onClick">Ein</button>

Maustastenmodifikatoren

• .links
• .Rechts
• .Mitte
  

Diese Modifikatoren beschränken die Handlerfunktion darauf, nur auf bestimmte Maustasten zu reagieren.

Systemtastenkombinationen

Wenn wir die globale Schlüsseloperationsmethode überwachen möchten, ist es offensichtlich nicht möglich, sie an das Seitenelement zu binden.

Wir können montiert überwachen:

montiert() {
  document.onkeydown = Funktion (Ereignis) {
    let key = window.event.keyCode;
    wenn (Schlüssel === 65 und Ereignis.Strg-Taste) { 
      // Auf die Tastenkombination Strg+A achten window.event.preventDefault(); // Standardmäßige Tastenkombination des Browsers deaktivieren console.log('Strg+A-Tastenkombination')    
    } sonst wenn(Taste === 83 && Ereignis.Strg-Taste) {       
      window.event.preventDefault(); //Tastenkombination zum Schließen des Browsers console.log('Speichern');
    }
  }
}

Aus den obigen Beispielen können wir ersehen, dass Umschalt, Strg und Alt in JS auch durch „window.event.shiftKey“, „window.event.ctrlKey“ und „window.event.altKey“ ersetzt werden können.

Anhang - Tastaturtasten-Tastencodetabelle

Oben finden Sie eine detaillierte Zusammenfassung der Überwachung von Tastaturereignissen durch Vue. Weitere Informationen zur Überwachung von Tastaturereignissen durch Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!