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





7 Answers

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

текста js изменение

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

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

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

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




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

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

Javascript / JQuery:

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



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

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




существует довольно близкое решение (не исправить все пути 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, при нажатии на клавиатуре запускается onkeyup.

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

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




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



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

<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: событие генерируется при выходе, если любые изменения, внесенные в текст ввода

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

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

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




2018, вот что я делаю:

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

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






Related