Определить ввод в элементах ввода определенного класса

Мне нужно определить, когда кто-то попадает "enter" в текстовые входы с определенным классом.

Мой jQuery выглядит следующим образом:

$('input.large').keypress(function (e) {
    if(e.which ==13)
        console.log("pressed enter");
});

Мой HTML-код выглядит примерно так:

<tr><td> Personal Name </td></tr>
<tr><td> <input type='text' class='large'> </td></tr>

<tr><td> Email</td></tr>
<tr><td> <input type='text' class='large'> </td></tr>

Когда я дал идентификаторы полей и попытался $('#elementid').keypress, он сработал. Но это не работает. Я не получаю никакой консоли. Что мне не хватает?

Ответы

Ответ 1

Вы можете использовать прямые (.on()) события в document с keydown (я думаю, что это лучше). Это позволит вам обнаружить keydown в текущих и будущих элементах, совпадающих с селектором.

HTML:

<strong>Personal Name</strong>
<input type='text' class='large' /><br />

<strong>Email</strong>
<input type='text' class='large' />
​

JS (jQuery 1. 7+):

Примечание. .which, .code, .charCode и .keyCode теперь устарели. Используйте следующее новое решение:

jQuery(document).on('keydown', 'input.large', function(ev) {
    if(ev.key === 'Enter') {
        // Will change backgroundColor to blue as example
        this.style.backgroundColor = '#EFF';

        // Avoid form submit
        return false;
    }
});

jsFiddle: http://jsfiddle.net/david_proweb/fjgvhubn/2/

Ответ 2

проверьте это: http://jsfiddle.net/EJyyr/

использовал этот html:

<tr><td> Personal Name </td></tr>
<tr><td> <input type='text' class='large' id='a'> </td></tr>

<tr><td> Email</td></tr>
<tr><td> <input type='text' class='large' id='b'> </td></tr>

и это jQuery which logs the input text id

$('.large').keypress(function (e) {
   if(e.which ==13)
    console.log($(this).attr('id'));
});

Ответ 3

Спасибо Дэвиду Родригесу за ваше объяснение. Это очень помогло. Мне пришлось обновить мою библиотеку JQuery, и функция .live() перестала работать правильно.

Вы можете использовать его для следующих

Выберите все флажки в поле формы, когда установлен флажок ввода типа select_all_checkboxes:

jQuery(document).on("click", "#select_all_checkboxes", function(){
    var chk = this.checked;
    $('input[id=selectAll]').each(function(){
        this.checked = chk;
    });
});

Вызвать функцию "checkMail", когда пользователь покинул поле, используя вкладку "o", нажав на любое поле с именем класса "email":

jQuery(document).on("blur", 'input.email', function(event){
    var email = $(this).val();
    if (!checkMail(email)) {
        alert("Invalid email.");
        $(this).focus();
    }
});