Лучший способ отслеживания onchange as-you-type в типе ввода = "текст"?

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

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

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

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

Ответ 1

Update:

См. Другой ответ (2015).

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

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

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

¹_{Разбито для <textarea> в Safari. Используйте textInput вместо}

Ответ 2

В эти дни слушайте 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>

Ответ 3

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

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

Javascript/JQuery:

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

Ответ 4

Javascript непредсказуем и смешным здесь.

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

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

Если вы используете ТОЛЬКО 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>

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

Ответ 8

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

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

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

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

<input type="text" oninput="handleValueChange()">

Ответ 9

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

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

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

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

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

Ответ 10

Пожалуйста, судите следующий подход, используя 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
});

Ответ 11

"вход" работал у меня.

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

Ответ 12

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

Ответ 13

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

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

Ответ 14

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

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

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

Ответ 15

Роберт Симер addEventListener не поддерживается в IE8.

"Старые версии IE поддерживали эквивалентный проприетарный метод EventTarget.attachEvent()". https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener