Найкращий спосіб відстежувати зміну під час введення типу type = “text”?

На мій досвід, 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 запускається після вставки, а також під час введення на клавіатурі він працює.

Переконайтеся, що ваш контрольний код не займає багато часу ... інакше користувач отримує погану вдосконалення.

Так, хитрість полягає в стрільбі по клавішах і по миші ... але будьте обережні, обидва можуть бути звільнені, тому врахуйте таке !!!

Будь ласка, оцініть наступний підхід за допомогою 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: подія генерується при виході, якщо якісь зміни внесені у вхідний текст

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