jQuery подія не змінюється, поки textbox не втратить фокус?

Я виявив, що jQuery змінює подію на текстовому полі, поки я не натискаю на текстове поле.

HTML:

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

JS:

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

See demo on JSFiddle

Моя програма вимагає, щоб подія була запущена при кожній зміні символу в текстовому полі. Натомість я навіть спробував використовувати keyup ...

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

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

Будь-яке обхідне рішення? Чи виникнуть проблеми з обома слухачами?

116
^^ This. Ви можете мати якомога більше обробників подій.
додано Автор Archer, джерело

7 Відповіді

Прив'язка до обох подій є типовим способом зробити це. Можна також прив'язати до події вставки.

Можна прив'язувати до кількох подій:

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

Якщо ви хочете бути педантичним щодо цього, ви також повинні прив'язати до миші, щоб перетягнути текст навколо, і додати змінну 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);
271
додано
@Doin і що, якщо я використовую плагін для заповнення полів форми, коли я натискаю кнопку на панелі інструментів? Або що, якщо є ще один фрагмент JavaScript, який оновлює входи без подій. Справа в тому, що є крайні випадки, і якщо ви хочете задовольнити їх, то так.
додано Автор Petah, джерело
@Doin autofill і т.д. навіть не зосереджуватиме вхід, крім того, 2 перевірки в секунду не матимуть помітного впливу на процесор.
додано Автор Petah, джерело
@SNag так, так само слід додати перевірку за допомогою змінної lastValue , щоб переконатися, що вона насправді змінилася.
додано Автор Petah, джерело
вищезгадана проблема. Припустимо, ви натискаєте texbox T і змінюєте значення. Матеріал працює нормально! Але припустимо, що мій курсор все ще перебуває на текстовому T і я перемикаю екран, використовуючи (ALT + TAB), все загвинчується і подія keyup звільняється, і всі речі йдуть не так.
додано Автор Ankur Soni, джерело
.on ("змінити вставку клавіатури", функція() {...} фактично спрацьовує кілька разів! Якщо я ввів символ, а потім натиснув назовні, події "змінити" та "ключ Якщо я натиснув правою кнопкою миші, а потім натиснув назовні, "змінити" і "вставити" обидва вистрілюються. !!
додано Автор SNag, джерело
+1. Однак, обов'язковим є «зміна», навіть необхідного тут? Мені не зрозуміло, який випадок, який буде оброблятись, не був би оброблений до того часу, коли він (зміниться) звільнився.
додано Автор Madbreaks, джерело
Нарешті хтось прочитав питання і відповів на все!
додано Автор Archer, джерело
Просто переконайтеся, що clearInterval() коли ваш текстове поле втрачає фокус, або ви будете з'їдати цикли процесора без причини. Для цього потрібно зберегти значення setInterval() , що повертається.
додано Автор Doin, джерело
@Petah, я думаю, що автозаповнення відбувається тільки один раз, на завантаженні сторінки, чи не так? Таким чином, одна перевірка під час або після onload повинна обробляти це. Що стосується відсутності будь-якого помітного ефекту - (а) може бути, так типово, але це хороша практика в будь-якому випадку, і (б) ОП обговорює тільки одне текстове поле, але для всіх, що ви знаєте, є 1000 з них на його або її фактичній сторінці. Або, можливо, цей код буде запечений у бібліотеці. Не кожен має швидкий процесор. IMHO це дуже погана форма, щоб робити речі неефективно тільки тому, що "процесори досить швидкі, щоб впоратися з нею".
додано Автор Doin, джерело
@ Петах ... так, ви маєте рацію, я не думав про це.
додано Автор Doin, джерело
Подія вставити буде запущено до того, як текст буде вставлено
додано Автор developerbmw, джерело

У сучасних веб-переглядачах можна скористатися подією введення :

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});
74
додано
Я хотів би прийняти цю відповідь, але, як ви сказали, це рішення для сучасних браузерів. Моє веб-додаток орієнтоване на користувачів, які все ще використовують IE8, і це не працює на IE8. :( Що я можу сказати.. :(
додано Автор SNag, джерело
Ніцца - я цього не знав. Чи є це в HTML5?
додано Автор Archer, джерело
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
додано
Псевдокод ...?
додано Автор developerbmw, джерело
Гей Бретт, Додав код, подивися.
додано Автор Milan, джерело
$(this).bind('input propertychange', function() {
        //your code here
    });

Це працює для введення тексту, вставлення, вставки миші правою кнопкою миші тощо.

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

Спробуйте це:

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

Див. демо на JSFiddle .

2
додано
Оскільки питання знаходиться на вставці, він не працює. подія не відкривається натисканням правою кнопкою миші та вставкою.
додано Автор Dhaval Marthak, джерело
він повідомив, що подія клавіатури не запускається, якщо клацнути правою кнопкою миші + вставити на неї, щоб keyup і change() мали своє типове поведінку, тому id він хоче виконати потім параметр paste
додано Автор Dhaval Marthak, джерело
hmm отриманий пункт!
додано Автор Dhaval Marthak, джерело
bind? Як ретро!
додано Автор Archer, джерело
Звичайно, але це не дає відповіді на запитання, чому використання bind замість on .
додано Автор Archer, джерело
А що це має відношення до використання bind() ?
додано Автор Archer, джерело

Спробуйте код:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});
0
додано
Якщо ви прочитали все запитання, яке ви бачите, він також сказав, "... але відомо, що подія клавіатури не відкривається натисканням правою кнопкою миші та вставкою."
додано Автор Archer, джерело
Як це захоплює вставку мишкою, як згадувалося в питанні?
додано Автор Archer, джерело
оновлено відповідь перевірте код
додано Автор Venkat.R, джерело
натискання клавіші є придатним, оскільки він сказав, що подія буде оброблена при кожній зміні символу в текстовому полі
додано Автор Venkat.R, джерело

Читання ваших коментарів привело мене до помилкового виправлення. Це не правильний шлях, я знаю, але може бути робота навколо.

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