web-dev-qa-db-fra.com

Comment détecter si la touche Entrée a été enfoncée dans une DIV à l'aide de jquery?

J'ai réussi à associer l'événement EnterKey au niveau du document comme suit:

    $(document).keypress(function (e) {
        if (e.which == 13) {
            alert('You pressed enter!');
        }
    });

Mais, je ne peux pas accrocher l'événement EnterKey sur un div portant l'id "myDiv".

<div id="myDiv"></div>

$("#myDiv").keypress(function (e) {
     if (e.which == 13) {
         alert('You pressed enter!');
     } 
 });

Est-il possible de détecter une presse EnterKey au sein d'une division? En fait, la Div contient des commandes d’entrée/de sélection permettant de filtrer le contenu d’une grille. Je veux accrocher l'événement EnterKey afin que, lorsque vous appuyez sur la touche EnterKey, je puisse filtrer la grille.

EDIT: .__ Veuillez noter que j’ai des entrées dans la div (je ne les ai pas intentionnellement montrées ici). Je ne veux pas accrocher l'événement manuellement pour chacun des contrôles d'entrée au sein de la Div. En outre, je suppose que lorsque l'utilisateur appuie sur Enter, au moins un contrôle d'entrée doit avoir le focus.

jquerykeypress
21
Baig

Essaye ça

 <div id="Div1">
    <input type ="text" id="aa"/>
    sdfsd hsjdhsj shdj shd sj
 </div>

Jquery

$(function(){
 $("#Div1 input").keypress(function (e) {
    if (e.keyCode == 13) {
        alert('You pressed enter!');
    }
 });
});

Démo

34
Amit

La seule manière dont un élément DOM peut recevoir des événements clés est s'il a le focus.

Définissez le focus sur votre div dans le gestionnaire onready:

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

Ou donnez le focus à votre élément via l'attribut tabindex .

EDIT: Comme @roasted l'a expliqué, vous pouvez également définir une règle CSS sur votre div pour éviter les problèmes de restylage:

#myDiv {
  outline: 0 solid;
}
4
Halim Qarroum

Ce que vous devez vraiment faire ici, c'est lier l'événement keypress à tous les éléments de formulaire tels que input, select et textarea à l'intérieur du div, comme:

$("#myDiv input, select, textarea").keypress(function (event) {
    if (event.which == 13) {
        event.preventDefault();
        alert('You pressed enter!');
    }
});

La principale chose à noter ici est l’utilisation de event.preventDefault() . Si vous ne l'utilisez pas, appuyer sur la touche Entrée peut entraîner la soumission du formulaire, ce que vous ne souhaitez évidemment pas ici. Vous souhaitez simplement appuyer sur la touche Entrée pour filtrer le contenu d'une grille. Ainsi, dès que vous appuyez sur la touche Entrée, vous pouvez obtenir les valeurs des éléments d'entrée et filtrer la grille en conséquence.

3
palaѕн

Vous pouvez d'abord focaliser le bouton d'envoi ou une balise, puis cliquez dessus

  $('#id of input button').focus();

ou 

 $('input[type="submit"]').focus();

puis appuyez sur Entrée

 $("#inputid").keypress(function (e) {
   if (e.which == 13) {
    alert('You pressed enter!');
  }
});
1
Samuel Kwame Antwi

Votre question pourrait être plus précise - vous souhaitez détecter un événement KeyPressed sur un objet d'entrée imbriqué dans une div. Peut-être que vous pourriez essayer:

$("#myDiv input,select").keypress(function (e) {
        if (e.which == 13) {
            alert('You pressed enter!');
        }
    });
1
Kamil T

Vous pouvez d’abord régler le focus sur la div en utilisant:

window.location.hash = '#name of div';

Ensuite, utilisez votre code, cela fonctionnera.

0
Vishal

La touche Entrée sert principalement à entrer quelque chose ou à envoyer .. Un bouton ou une zone de texte à l'intérieur du div qui est en surbrillance, puis appuyez sur Entrée. 

0
Bharadwaj
$("#inputid").keypress(function (e) {
    if (e.which == 13) {
        alert('You pressed enter!');
    }
});

vous voulez associer le gestionnaire d'événements à une entrée/un bouton spécifique (comme un bouton "Filtre")

0
Daniel Ruf