web-dev-qa-db-fra.com

Capturer l'événement clé de la presse (ou keydown) sur l'élément DIV

Comment intercepter l'événement de frappe ou d'abaissement de touche sur un élément DIV (à l'aide de jQuery)?

Que faut-il pour donner le focus à l'élément DIV?

javascriptjqueryhtmlscriptingkeypress
129
Lalchand

(1) Définissez l'attribut tabindex:

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

(2) Lier à keydown:

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

Pour activer le démarrage:

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

Pour supprimer - si cela ne vous plaît pas - la bordure de mise au point div, définissez outline: none dans le CSS.

Voir le tableau de codes clés pour plus de keyCode possibilités.

Tout le code en supposant que vous utilisiez jQuery.

268
helle

tabindex L'attribut HTML indique si son élément peut être focalisé et si/où il participe à la navigation séquentielle au clavier (généralement avec la touche Tab. ). Lisez MDN Web Docs pour une référence complète.

Utiliser JQuery

$( "#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>

Utiliser JavaScript

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>
5
nkshio

Voici un exemple sur la plaine JS:

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>
3
Илья Зеленько