Как да разбера дали клавишът Enter е натиснат в рамките на DIV с помощта на jquery?

Успешно закачих събитието EnterKey на ниво документ, както следва:

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

Но не мога да закача събитието EnterKey на Div с идентификатор "myDiv".

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

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

Възможно ли е да се открие натискане на EnterKey в Div? Всъщност Div съдържа някои контроли за въвеждане/избор, които се използват за филтриране на съдържанието на Grid. Искам да закача събитието EnterKey, така че когато EnterKey е натиснат, да мога да филтрирам мрежата.

РЕДАКТИРАНЕ: Моля, имайте предвид, че имам входове в div (умишлено не съм ги показал тук). Не искам да закача събитието ръчно за всеки контрол на входа в Div. Освен това предполагам, че когато потребителят натисне EnterKey, поне една контрола за въвеждане ще има фокус.


jquery keypress
person Baig    schedule 29.05.2013    source източник
comment
Как изпращате натискане на клавиш към div? Искам да кажа, как тествате това?   -  person Halim Qarroum    schedule 29.05.2013
comment
натискането на клавиш може да бъде открито само глобално на входове $(прозорец) и форма.   -  person Daniel Ruf    schedule 29.05.2013

Отговори (8)


arrow_upward
34
arrow_downward

Опитайте тази

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

Демо

person Amit    schedule 29.05.2013

arrow_upward
4
arrow_downward

Единственият начин, по който DOM елемент може да получи ключови събития, е ако има фокус.

Или задайте фокуса на вашия div в манипулатора onready:

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

Или дайте фокус върху вашия елемент чрез атрибута tabindex.

РЕДАКТИРАНЕ: Както е обяснено от @roasted, можете също да зададете CSS правило за вашия div, за да избегнете проблеми с рестартирането:

#myDiv {
  outline: 0 solid;
}
person Halim Qarroum    schedule 29.05.2013
comment
но много лесно ще загуби фокуса ;-) - person Daniel Ruf; 29.05.2013
comment
може да използва в допълнение css: #myDiv{outline:0}, за да избегне активно преоформяне на елементи - person A. Wolff; 29.05.2013
comment
Разбира се, но той поне ще може да получава събития. Ето защо ключовите събития обикновено се обработват от входни елементи. - person Halim Qarroum; 29.05.2013

arrow_upward
3
arrow_downward

Това, което наистина трябва да направите тук, е да свържете събитието за натискане на клавиш към всички елементи на формуляра като въвеждане, избор и текстово поле вътре в div като:

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

Основното нещо, което трябва да забележите тук, е използването на event.preventDefault(). Тъй като, ако не го използвате, натискането на клавиша enter може да доведе до изпращане на формуляра, което очевидно не искате тук. Просто искате да натиснете клавиша enter, за да филтрирате съдържанието на мрежа. Така че веднага след натискане на клавиша за въвеждане можете да получите стойностите от входните елементи и да филтрирате съответно мрежата.

person palaѕн    schedule 29.05.2013

arrow_upward
1
arrow_downward

Вашият въпрос може да бъде по-точен - искате да откриете събитие KeyPressed на входен обект, вложен в определен div. Може би бихте могли да опитате:

$("#myDiv input,select").keypress(function (e) {
        if (e.which == 13) {
            alert('You pressed enter!');
        }
    });
person Kamil T    schedule 29.05.2013
comment
Погледнете първоначалния въпрос: Всъщност Div съдържа някои контроли за въвеждане/избор, които се използват за филтриране на съдържанието на Grid - person Kamil T; 29.05.2013

arrow_upward
1
arrow_downward

Можете първо да фокусирате бутона за изпращане или етикет, след което да щракнете върху него

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

or 

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

след това натиснете enter

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

arrow_upward
0
arrow_downward

Клавишът Enter се натиска главно за въвеждане на нещо или изпращане. Имате бутон или текстово поле вътре в div, което е маркирано и след това натиснете enter.

person Bharadwaj    schedule 29.05.2013

arrow_upward
0
arrow_downward 

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

искате да свържете манипулатора на събитие към конкретен вход/бутон (като някакъв бутон "филтър")

person Daniel Ruf    schedule 29.05.2013
comment
По-скоро трябва да използвате $(#inputid) вместо $(#myDiv #inputid) в този случай. Идентификаторът е уникален за всеки елемент на страницата, няма нужда да се указва неговият родител в селектора. - person Kamil T; 29.05.2013

arrow_upward
0
arrow_downward

Първо можете да зададете фокуса върху div, като използвате:

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

След това използвайте кода си, той ще работи.

person Vishal    schedule 30.01.2014