Событие изменения текстового поля jQuery не срабатывает, пока текстовое поле не теряет фокус?

Я обнаружил, что событие изменения jQuery в текстовом поле не срабатывает, пока я не выйду за пределы текстового поля.

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

Смотрите демон на JSFiddle

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

$("#textbox").keyup(function() {alert("Keyup detected!");});

... но это известный факт, что событие keyup не запускается при щелчке правой кнопкой мыши и вставкой.

Любое обходное решение? Есть ли у обоих слушателей какие-либо проблемы?

Ответы

Ответ 1

Связывание с обоими событиями - типичный способ сделать это. Вы также можете привязать к событию вставки.

Вы можете привязываться к нескольким событиям следующим образом:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

Если вы хотите быть педантичным, вы также должны привязать к mouseup для перемещения текста и добавить переменную lastValue, чтобы убедиться, что текст действительно изменился:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

И если вы хотите быть super duper pedantic, тогда вы должны использовать таймер интервала для автоматической загрузки, плагинов и т.д.:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

Ответ 2

В современных браузерах вы можете использовать событие input:

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});

Ответ 3

if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

Ответ 4

$(this).bind('input propertychange', function() {
        //your code here
    });

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

Ответ 5

Попробуйте следующее:

$("#textbox").bind('paste',function() {alert("Change detected!");});

Смотрите демо на JSFiddle.

Ответ 6

Попробуйте приведенный ниже код:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

Ответ 7

Чтение ваших комментариев привело меня к грязному исправлению. Я знаю, это неправильный путь, но это может быть проблема.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});