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

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

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

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

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

Обновить:

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

Оригинал 2009 Ответ:

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

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

¹ _{Сломан для <textarea>сафари. Используйте textInputвместо}

В эти дни слушай oninput. Такое ощущение, что onchangeнет необходимости терять фокус на элементе. Это HTML5.

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

const source = document.getElementById('source');
const result = document.getElementById('result');

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

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

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

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

Javascript / JQuery:

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

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

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

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

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

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

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

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

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

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

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

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

-

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

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

-

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

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

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

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

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

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

<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 запускается при вводе с клавиатуры.

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

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

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

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

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

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

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

<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

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

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

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

Метод 1: Добавить прослушиватель событий для input:

element.addEventListener("input", myFunction);

Способ 2. Определите oninputсвойство с помощью JavaScript:

element.oninput = function()
{
    myFunction();
};

Способ 3: определить oninputсвойство с помощью HTML:

<input type="text" oninput="myFunction();">

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

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