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



Answers

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

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

<script>
    onload = function () {
       var e = document.getElementById('myInput');
       e.oninput = myHandler;
       e.onpropertychange = e.oninput; // for IE8
       // e.onchange = e.oninput; // FF needs this in <select><option>...
       // other things for onload()
    };
</script>
<input type=text id=myInput>
Question

По моему опыту, 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();
});



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

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



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

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




существует довольно близкое решение (не исправить все пути 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 не занимает много времени ... в противном случае пользователь получает плохое впечатление.

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




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

<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




Related