Лучший способ отследить onchange по мере ввода в тип ввода = текст? - PullRequest
Новая
       25

Лучший способ отследить onchange по мере ввода в тип ввода = текст?

380 голосов
/ 22 февраля 2009

По моему опыту, событие input type="text" onchange обычно происходит только после того, как вы покинете (blur) элемент управления.

Есть ли способ заставить браузер запускать onchange каждый раз, когда textfield меняется содержимое? Если нет, то какой самый элегантный способ отследить это «вручную»?

Использование onkey* событий не является надежным, поскольку вы можете щелкнуть правой кнопкой мыши поле и выбрать Вставить, и это изменит поле без ввода с клавиатуры.

Является ли setTimeout единственным способом? .. Гадкий: -)

Ответы [ 14 ]

4 голосов
/ 29 марта 2012

Существует довольно близкое решение (не исправляйте все способы вставки), но большинство из них:

Работает как для ввода, так и для текстовых областей: 

<input type="text" ... >
<textarea ... >...</textarea>

Сделай так: 

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

Как я уже сказал, не все способы Paste запускают событие во всех браузерах ... в худшем случае некоторые не запускают события вообще, но таймеры ужасно использовать для таких целей.

Но большинство способов вставки выполняются с помощью клавиатуры и / или мыши, поэтому после вставки обычно запускается onkeyup или onmouseup, а при вводе с клавиатуры запускается onkeyup.

Убедитесь, что ваш контрольный код не займет много времени ... в противном случае пользователь получит плохое впечатление.

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

3 голосов
/ 02 апреля 2015

Для отслеживания каждого попробуйте этот пример, а перед этим полностью уменьшите частоту мигания курсора до нуля. 

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: событие генерируется при выходе

onchange: событие генерируется при выходе, если какие-либо изменения были сделаны в inputtext

onkeydown: событие генерируется при любом нажатии клавиши (также при длительном удержании клавиши)

onkeyup: событие генерируется при любом отпускании ключа

onkeypress: то же, что onkeydown (или onkeyup), но не будет реагировать на ctrl, backsace, alt other

3 голосов
/ 22 февраля 2009

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

1 голос
/ 16 апреля 2018

2018 здесь, это то, что я делаю: 

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Если вы укажете на недостатки в этом подходе, я был бы признателен.

Страница:
...