HTML / JS события при изменении полей

Question

Я привык к программированию на C # и часто привязываюсь к событию TextChanged, например textBox.TextChanged. Это будет срабатывать в тот момент, когда пользователь, программа или что-либо еще вызывает изменение содержимого текстового поля.

У меня небольшая проблема с моей HTML-формой. Происходят некоторые события AJAX и некоторая проверка JavaScript. Эти вещи должны происходить , когда пользователь вносит свои изменения, однако события запускаются только при определенных условиях.

Например, у меня есть выпадающее меню:

<select name="costCtr" id="costCentres" onchange="loadWorkers()">
  <?php echo $costCentreOptions; ?>
</select>

Ожидаемый результат заключается в том, что при изменении выбора МВЗ рабочие будут заполнены. Это не вариант. Если пользователь перейдет в выпадающее меню и с помощью клавиатуры выберет этот параметр, ничего не произойдет! Единственный способ вызвать событие - выбрать параметр с помощью мыши или выбрать параметр с помощью клавиатуры и нажать клавишу ввода.

Точно так же у меня есть текстовое поле для даты и кнопка рядом с ней, которая показывает отличное средство выбора даты и времени на основе javascript. Это выглядит примерно так:

<input type="text" name="date" id="date" onchange="validateForm()" />

Если пользователь нажимает кнопку, чтобы показать средство выбора даты, выбирает дату, нажимает кнопку ОК, и средство выбора даты и времени сбрасывает строку даты в поле ввода, событие onchange не запускается. Фактически, событие onchange вызывается только в том случае, если пользователь изменяет текст вручную, а затем фокусируется вдали от поля ввода!

Как другие веб-разработчики обрабатывают эти события? К каким событиям я должен быть привязан? Должен ли я связываться с body.onkeypress, а затем написать гору кода, чтобы определить, что изменилось, и действовать соответствующим образом? Другие идеи?

Answer 1

Для <select> элементов я всегда использую onkeyup в сочетании с onchange, например:

<select name="costCtr" id="costCentres" onchange="loadWorkers()" onkeyup="this.onchange()">
  <?php echo $costCentreOptions; ?>
</select>

... который будет правильно фиксировать изменения, сделанные с помощью клавиатуры.

Для текстовых полей вы можете снова использовать onkeyup, если вы хотите проверить ввод как пользовательские типы, или onblur, если вы хотите проверить, когда пользователь пытается покинуть поле, например:

<input type="text" name="date" id="date" onkeyup="validateCurrentFieldValue()" />

... или:

<input type="text" name="date" id="date" onblur="validateForm()" />

Для текстовых полей, которые используются со скриптом выбора даты, лучший способ получить событие выбора будет зависеть от вашего скрипта выбора даты. Вы должны проверить его документацию, чтобы увидеть, что он говорит о захвате событий onchange / onselection из средства выбора.

Answer 2

Для удобства навигации по клавиатуре может потребоваться также добавить событие нажатия клавиши / нажатия клавиш.

Для средства выбора даты запустите событие при закрытии средства выбора даты.