Cattura evento tasto (o keydown) sull'elemento DIV

146

Come intercettare l'evento keypress o key down su un elemento DIV (usando jQuery)?

Cosa è necessario per focalizzare l'elemento DIV?

— Lalchand
fonte

Cosa significa "focus" per un div?

— Jonathon Faust,

jboyd diverso da tabulare quando ha un tabindex, puoi usare javascript per trovarlo e chiamare il metodo focus su di esso.

— Brendan Enrick,

@Lalchand ... puoi accettare la mia risposta quando? :)

— helle,

Risposte:

301

(1) Imposta l' tabindexattributo:

<div id="mydiv" tabindex="0" />

(2) Associa al keydown:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

Per impostare lo stato attivo all'avvio:

$(function() {
   $('#mydiv').focus();
});

Per rimuovere - se non ti piace - il divbordo attivo, imposta outline: nonenel CSS.

Vedere la tabella dei codici chiave per ulteriori keyCodepossibilità.

Tutto il codice presuppone che tu usi jQuery.

— Helle
fonte

+1 tabindex è il punto chiave qui per rendere il div 'selezionabile'. JQuery non è necessario, la stessa cosa funziona con Angular e (suppongo) con semplici eventi javascript.

— Jukka Dahlbom,

Qual è il supporto del browser per questo?

— knownasilya,

tabindex è una parte chiave, ma non impostarlo su alcun valore diverso da "0". Se si fa qualcosa al di sopra di 0, si rovinano gli screen reader per gli utenti ipovedenti (si salterà tutto sulla pagina e si passerà direttamente a qualsiasi tabindex sopra 0). tabindex = "0" lo rende "tabbable." puoi avere infiniti elementi con tabindex = "0"

— zonabi

Funziona anche con <pre>!

— dfmiller,

Eccellente! Mi mancava l'attributo tabindex, forse perché i DIV non possono ricevere il focus a meno che non abbiano un tabindex. Grazie uomo! Salvato la mia vita! EDIT: funziona anche con React

— Vinícius Negrão,

Ecco un esempio su JS semplice:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Espandi frammento

— Илья Зеленько
fonte

In che modo questo risponde alla domanda?

— Poul Bak,

L'attributo HTML tabindex indica se il suo elemento può essere focalizzato e se / dove partecipa alla navigazione sequenziale della tastiera (di solito con il Tabtasto). Leggi i documenti Web MDN per un riferimento completo.

Usando Jquery

Mostra snippet di codice

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="division" tabindex="0"></div>

Espandi frammento

Utilizzando JavaScript

Mostra snippet di codice

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<div id="division" tabindex="0"></div>

Espandi frammento

— nkshio
fonte

in realtà ho trovato questo alla ricerca di un problema con l'attivazione dell'evento focusout quando i controlli sul div hanno perso il focus dicono di fare clic sulla barra di scorrimento dei div, semplicemente aggiungendo il tabstop al div era la soluzione, quindi grazie mille

— MikeT