133 Stimmen

Prüfen, ob eine Taste gedrückt ist?

Gibt es eine Möglichkeit, in JavaScript zu erkennen, ob eine Taste gerade gedrückt ist?

Ich kenne das Ereignis "keydown", aber das ist nicht das, was ich brauche. Einige Zeit NACH dem Drücken der Taste, möchte ich in der Lage sein, zu erkennen, ob es noch gedrückt wird.

P. S. Das größte Problem scheint zu sein, dass nach einer gewissen Zeit die Taste beginnt zu wiederholen, Abfeuern von keydown und keyup Ereignisse wie ein Unhold. Hoffentlich gibt es nur eine einfache isKeyDown(key) Funktion, aber wenn nicht, dann wird dieses Problem zu überwinden / gearbeitet werden müssen, um.

15 Stimmen

Ein häufiges Problem bei den Antworten, die ich hier sehe, ist, dass, wenn Sie eine Taste gedrückt halten, dann die Registerkarte wechseln oder den Fokus ändern, die Taste loslassen und dann zurückschalten, der Code glaubt, dass die Taste gedrückt ist, bis Sie sie erneut drücken oder die Maus über die Seite bewegen :-(

0 Stimmen

Ist damit Ihre Frage beantwortet? JavaScript: Prüfen, ob Maustaste gedrückt?

1voto

Magnus Punkte 1318

Dies funktioniert in Firefox und Chrome.

Ich musste eine spezielle HTML-Datei lokal öffnen (durch Drücken von Enter wenn die Datei im Datei-Explorer von Windows ausgewählt ist), entweder nur zur Ansicht der Datei oder zur Bearbeitung in einem speziellen Online-Editor.

Ich wollte also zwischen diesen beiden Optionen unterscheiden, indem ich die Taste Ctrl -Taste oder nicht, während Sie Enter .

Wie Sie alle aus den Antworten hier verstanden haben, scheint dies nicht wirklich möglich zu sein, aber hier ist ein Weg, der dieses Verhalten in einer Weise nachahmt, die für mich akzeptabel war.

Die Funktionsweise ist wie folgt:

Wenn Sie die Taste Ctrl -Taste beim Öffnen der Datei, dann wird ein Keydown-Ereignis im Javascript-Code nie ausgelöst. Aber ein Keyup-Ereignis wird ausgelöst (wenn Sie schließlich die Ctrl -Taste). Der Code fängt das ein.

Der Code schaltet auch Tastenereignisse (sowohl keyup als auch keydown) aus, sobald eines davon auftritt. Wenn Sie also die Taste Ctrl -Taste, nachdem die Datei geöffnet wurde, wird nichts passieren.

window.onkeyup = up;
window.onkeydown = down;
function up(e) {
  if (e.key === 'F5') return; // if you want this to work also on reload with F5.

  window.onkeyup = null;
  window.onkeyup = null;
  if (e.key === 'Control') {
    alert('Control key was released. You must have held it down while opening the file, so we will now load the file into the editor.');
  }         
}
function down() {
  window.onkeyup = null;
  window.onkeyup = null;
}

1voto

Nate Whittaker Punkte 1666

Ich hatte viel Glück bei der Erkennung, ob eine Taste gedrückt wurde, indem ich die Tastaturereignisse repeat Eigenschaft .

Wenn Sie das Codeschnipsel ausführen und eine Taste gedrückt halten, während Sie die Texteingabe vornehmen, sollte dies in der Ausgabe sichtbar sein.

Vermutlich könnten Sie diese Event-Handler verwenden, um die Wiederholungstaste irgendwo zu speichern, so dass anderer Code sie nach Belieben überprüfen kann.

const input = document.getElementById('input'),
  output = document.getElementById('output');

input.addEventListener('keydown', event => {
  if (event.repeat) {
    output.value = event.key;
  }
});

input.addEventListener('keyup', event => {
  output.value = '';
});

<p>
  <label for="input">Text input:</label>
  <input id="input" />
</p>
<p>
  Repeating key = "<output id="output" for="input"></output>"
</p>

0voto

Bruno Freire Punkte 100

Ich weiß, es ist zu spät, aber ich habe ein leichtes (398 Bytes) Skript, das zurückgibt, wenn eine Taste gedrückt wird: https://github.com/brunoinds/isKeyPressed

if (KeyPressing.isKeyPressed(13)){ //Pass the keyCode integer as parameter
     console.log('The Enter key is being pressed!')
  }else{
     console.log('The Enter key is NOT being pressed!')
  }

Sie können sogar ein Intervall festlegen, in dem geprüft wird, ob die Taste gedrückt wird:

setInterval(() => {
    if (KeyPressing.isKeyPressed(13)){
        console.log('The Enter key is being pressed!')
    }else{
        console.log('The Enter key is NOT being pressed!')
    }
  }, 1000) //Update data every 1000ms (1 second)

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