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


133

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

HTML:

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

JS:

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

Посмотреть демо на JSFiddle

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

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

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

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


^^ Это. Вы можете иметь столько обработчиков событий, сколько захотите.
— Восстановить Монику Челлио

Ответы:


298

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

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

$("#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педантичным, вам следует использовать интервальный таймер для автоматического заполнения, плагинов и т. Д .:

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);

9
Наконец кто-то прочитал вопрос и ответил на все вопросы!
— Восстановить Монику Челлио

4
.on('change keyup paste', function() {...}на самом деле срабатывает несколько раз! Если я набрал символ, а затем щелкнул снаружи, срабатывают события 'change' и 'keyup', что приводит к многократному выполнению функции! Если я вставил правой кнопкой мыши, а затем щелкнул снаружи, «изменения» и «вставить» оба запускаются. Черт! При использовании Ctrl + V для вставки и последующем щелчке снаружи он запускается трижды !!
— SNag

1
@SNag да, поэтому вы должны добавить проверку с помощью lastValueпеременной, чтобы убедиться, что она действительно изменилась.
— Petah

1
+1. Однако разве здесь обязательны к «изменениям»? Мне неясно, в каком случае это будет обрабатываться, которое еще не было обработано к моменту его (изменения).
— Madbreaks

1
Событие paste запускается до того, как текст будет вставлен на самом деле
— разработчик

85

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

DEMO

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

1
Хорошо - я не знал об этом. Это вещь HTML5?
— Восстановить Монику Челлио

4
Я бы с удовольствием принял этот ответ, но, как вы сказали, это решение для современных браузеров. Мое веб-приложение предназначено для пользователей, все еще использующих IE8, и это не работает в IE8. :( Что я могу сказать .. :(
— SNag

Не срабатывает, если, например, выделить весь текст и нажать клавишу удаления
— jjxtra

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

Это работает для набора текста, вставки, щелчка правой кнопкой мыши и т. Д.


1
Это кажется лучшим решением, потому что оно не запускает несколько событий, если вы делаете что-то вроде нажатия стрелки вверх в числовом поле.
— Джастин

Простое и эффективное решение
— Абдулхамид

4
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>

2

Попробуй это:

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

См. Демонстрацию на JSFiddle .


Поскольку вопрос в пасте, она не работает. событие не запускается при щелчке правой кнопкой мыши и вставке.
— Dhaval Marthak

И при чем тут использование bind()?
— Восстановить Монику Челлио

он сказал , что он событие KeyUp не срабатывает , когда правая кнопка мыши + вставить на него, так keyupи change()имеет свое собственное типичное поведение так ид он хочет выполнить событие , то pasteможет быть вариантом
— Dhaval Marthak

Конечно, но это все еще не дает ответа на вопрос, почему использование bind вместо вместо on.
— Восстановить Монику Челлио

0

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

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

Как происходит вставка захвата с помощью мыши, как указано в вопросе?
— Восстановить Монику Челлио

нажатие клавиши подходит, так как он сказал, чтоevent to be fired on every character change in the textbox
— Venkat.R

Если бы вы прочитали все вопросы, вы бы увидели, что он также сказал:"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."
— Восстановите Монику Челлио

0

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

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.