2012-04-25 2 views
4

Всякий раз, когда текст в элементе управления ввода изменяется, мне нужно немедленно обновить некоторые вещи. Но я не могу найти подходящее событие для этого.Какое правильное событие javascript для любого изменения текста в элементе управления ввода текста?

  • onchange только срабатывает, когда вы покидаете окно ввода (например, откройте или нажмите на внешнюю сторону).

  • OnKeyPress пожары до того производится изменение, и оно срабатывает на любой нажатием клавиши (например, также курсора влево & право, которое не вызывает никаких изменений в тексте)

  • OnKeyDown и OnKeyUp также огонь по любой ключа (даже как Сдвиг и т.д., которые не вызывают какие-либо изменений в тексте)

Кроме того, ни один из них не кажется, срабатывает при нажатии правой кнопки мыши + вставки из буфера обмена с помощью мыши. Или при изменении значения из JS (т. Е. Делая input.value = что-то из другого места).

Минимальный пример: http://jsfiddle.net/nggAm/

Что я должен делать? Я предполагаю, что один из способов, которыми я мог бы обойти это (ну, в основном), устанавливать ВСЕ события в один общий обработчик событий, кэшировать его там и выполнять фактическое обновление при изменении строки. Но это кажется немного дрянным. Что такое правильно способ сделать это?

+0

К сожалению, [мутационные события] (https://developer.mozilla.org/en/DOM/Mutation_events) не являются ни кросс-браузер и не рекомендуется. –

ответ

1

Для более старых браузеров вы должны установить do, чтобы установить входной сигнал onkeyup и onchange и onpaste.

Но у более новых браузеров есть oninput, и это то, что вы хотели бы иметь в каждом браузере.

Вы можете установить все события, а затем удалить все, кроме oninput, если идет oninput.

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

образец кода направляет все события в один обработчик, удаление, если oninput пожаров

F.text1.oninput= function(){ 
    F.text1.onpaste= F.text1.onchange= null; 
    if(!document.documentMode) F.text1.onkeyup= null; 
    F.text1.oninput= F.limiter; 
    return F.limiter(); 
} 
F.text1.onpaste= function(){ 
    setTimeout(F.limiter, 100); 
} 
F.text1.onkeyup= F.text1.onchange= F.limiter; 
Смежные вопросы