Как использовать функцию изменения для типов ввода эффективно

Question

Я отслеживать входные изменения, как это:

$(document).ready(function() { 
    $('input').change(function() { 
     alert("Key pressed"); 
    }); 
    $('textarea').change(function() { 
     alert("Key pressed"); 
    }); 
    $('input:radio').change(function() { 
     alert("Key pressed"); 
    }); 
    $('input:checkbox').change(function() { 
     alert("Key pressed"); 
    }); 
}); 

Можно ли повторно фактор приведенный выше код, так что мне не нужно называть каждый элемент по отдельности ?

Answer 1

Используйте multiselectors реорганизовать код :input это выбрать все элементы ввода

$(':input').on('change', function() { 
    alert("Key pressed"); 
}); 

Answer 2

Чтобы захватить keypress событие на всех входах вы не должны упоминать :checkbox и :radio, как они включены в input:

$('input, textarea').on('change', function() { 
    alert("Key pressed"); 
}); 

Вы можете даже использовать keypress/keyup/keydown события вместо change.

Выбирает комбинированные результаты всех указанных селекторов. Вы можете указать любое количество селекторов для объединения в один результат. Этот многократный комбинатор выражений является эффективным способом выбора разрозненных элементов. Порядок элементов DOM в возвращаемом объекте jQuery может быть не идентичным, так как они будут в порядке документа. Альтернативой этому комбинатору является метод .add().

Документы: https://api.jquery.com/multiple-selector/

Answer 3

JQuery использует селектор двигателя Sizzle, который следует тем же правилам, что и CSS. Имея это в виду, вы можете отделить селекторы, используя ,. Попробуйте следующее:

$('input, textarea').change(function() { 
    alert("Key pressed"); 
}); 

В качестве альтернативы вы можете применить общий класс ко всем этим элементам и выбрать его вместо этого.

Обратите внимание, что ваши селекторные :radio и :checkbox являются излишними, так как вы выбираете элемент input. Также обратите внимание, что событие change не срабатывает до тех пор, пока значение элемента не изменится и оно теряет фокус. Если вы хотите запустить событие при нажатии клавиши, используйте keypress или keydown в зависимости от ваших точных требований.