it-swarm.com.ru

Лучший способ отследить onchange, как вы вводите в input type = "text"?

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

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

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

setTimeout единственный путь? .. Гадкий :-)

360
Ilya Birman

Обновить:

Смотрите Еще один ответ (2015).


Оригинальный 2009 ответ:

Итак, вы хотите, чтобы событие onchange сработало при нажатии клавиш, размытии, вставке и? Это волшебство.

Если вы хотите отслеживать изменения по мере их ввода, используйте "onkeydown". Если вам нужно перехватить операции вставки с помощью мыши, используйте "onpaste" ( Т.Е. , FF3 ) и "oninput" ( FF, Opera, Chrome, Safari1).

1Сломан для <textarea> в Safari. Используйте textInput вместо

232
Crescent Fresh

В эти дни слушайте oninput . Похоже на onchange без необходимости терять фокус на элементе. Это HTML5.

Он поддерживается всеми (даже мобильными), кроме IE8 и ниже. Для IE добавьте onpropertychange. Я использую это так:

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

const typeHandler = function(e) {
  $result.innerHTML = e.target.value;
}

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough
<input id="source" />
<div id="result"></div>

516
Robert Siemer

Javascript здесь непредсказуем и забавен.

  • onchange происходит только когда вы размыли текстовое поле
  • onkeyup & onkeypress не всегда происходит при изменении текста
  • onkeydown происходит при изменении текста (но не может отслеживать вырезать и вставить с помощью мыши)
  • onpaste & oncut происходит при нажатии клавиш и даже при щелчке правой кнопкой мыши.

Итак, для отслеживания изменений в текстовом поле нам нужны onkeydown, oncut и onpaste. В обратном вызове этого события, если вы проверите значение текстового поля, вы не получите обновленное значение, так как значение изменяется после обратного вызова. Таким образом, решение для этого состоит в том, чтобы установить функцию тайм-аута с тайм-аутом 50 миллисекунд (или может быть меньше), чтобы отслеживать изменения.

Это грязный взлом, но это единственный способ, как я исследовал.

Вот пример . http://jsfiddle.net/2BfGC/12/

37
Sanket Sahu

Ниже код отлично работает для меня с Jquery 1.8.3

HTML: <input type="text" id="myId" />

Javascript/JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});
34
Amrit Pal Singh

onkeyup происходит после того, как вы наберете, например, я нажимаю t, когда поднимаю палец, действие происходит, но на keydown действие происходит до того, как я наберу символ t

Надеюсь, что это полезно для кого-то. 

Так что onkeyup лучше, когда вы хотите отправить то, что вы только что набрали.

9
Fernando André

У меня было похожее требование (текстовое поле в стиле Twitter). Используется onkeyup и onchange. onchange фактически заботится об операциях вставки мыши во время потери фокуса с поля.

[Обновление] В HTML5 или новее используйте oninput для получения обновлений модификации символов в реальном времени, как объяснено в других ответах выше.

8
Mohnish

Если вы используете ТОЛЬКО Internet Explorer, вы можете использовать это:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Надеюсь, это поможет.

7
RolandDeschain

Я думаю, что в 2018 году лучше использовать событие input.

-

Как описывает спецификация WHATWG ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Срабатывает в элементах управления, когда пользователь изменяет значение (см. Также Событие change )

-

Вот пример того, как его использовать:

<input type="text" oninput="handleValueChange()">
4
Patrick H.

«вход» работал для меня. 

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
4
Sam

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

Это работает для входов, а также для текстовых областей:

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

Делай так:

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

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

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

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

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

4
z666zz666z

Пожалуйста, оцените следующий подход, используя JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});
4
Alex Uke

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

<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
Venkat

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

3
Gumbo

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

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

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

1
a20