Событие изменения текстового поля 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.