saber - ¿Cómo detectar si se presionó la tecla Enter dentro de un DIV usando jQuery?

keypress jquery ejemplos

Question

He conectado correctamente el evento EnterKey en el nivel de documento de la siguiente manera:

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

Pero, no puedo conectar el evento EnterKey en una Div con id "myDiv".

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

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

¿Es posible detectar una pulsación EnterKey dentro de una Div? En realidad, la División contiene algunos controles de entrada / selección que se utilizan para filtrar el contenido de una Cuadrícula. Quiero conectar el evento EnterKey para que cuando se presiona la tecla Enter pueda filtrar la cuadrícula.

EDITAR: Tenga en cuenta que tengo entradas dentro del div (intencionalmente no las he mostrado aquí). No quiero conectar el evento manualmente para cada uno de los controles de entrada dentro de la Div. Además, estoy asumiendo que cuando el usuario presiona la tecla Enter, al menos un control de entrada tendrá el enfoque.

Answer 1

La única forma en que un elemento DOM puede recibir eventos clave es si tiene el foco .

O bien, establezca el foco a su div en el controlador onready :

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

O dale el enfoque a tu elemento a través del atributo tabindex .

EDITAR: como se explicó @roasted, también puede establecer una regla CSS para su div para evitar problemas de restyling:

#myDiv {
  outline: 0 solid;
}

Answer 2

La tecla Intro se presiona principalmente para ingresar algo o enviar. Tenga un botón o cuadro de texto dentro del div que está resaltado y luego presione Intro.

Answer 3

Lo que realmente necesita hacer aquí es vincular el evento de pulsación de tecla a todos los elementos del formulario, como entrada, selección y área de texto dentro de la división, como:

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

Lo principal que hay que notar aquí es el uso de event.preventDefault() . Dado que, si no lo usa, al presionar la tecla Intro podría resultar en enviar el formulario, lo que obviamente no desea aquí. Solo desea presionar la tecla Intro para filtrar el contenido de una Cuadrícula. Entonces, tan pronto como se presiona la tecla Intro, puede obtener los valores de los elementos de entrada y filtrar la cuadrícula en consecuencia.

Answer 4

Primero puedes establecer el foco en el div usando:

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

Entonces usa tu código funcionará.

Answer 5

Prueba esto

 <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!'');
    }
 });
});

Demo

Answer 6

Puede enfocar el botón de envío o una etiqueta primero y luego hacer clic en él

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

o

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

luego presiona enter

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

Answer 7

Su pregunta podría ser más precisa: desea detectar el evento KeyPressed en un objeto de entrada anidado dentro de ciertos div. Tal vez podrías intentar:

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

Answer 8

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

desea vincular el controlador de eventos a una entrada / botón específico (como un botón de "filtro")