Событие изменения Google Chrome при вводе не запускается, если в keyup добавлен символ - PullRequest
Новая
       28

Событие изменения Google Chrome при вводе не запускается, если в keyup добавлен символ

7 голосов
/ 30 октября 2011 
$('input#not-gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
        $(this).val($(this).val() + '.');// try with any other char
    },
    change: function(){
       console.log('I\'m a changed input');
    }
});

Я поставил эту ошибку в этом упрощенном примере jsfiddle .Моя проблема, связанная с этой ошибкой, заключается в том, что у меня есть финансовое приложение, которое я создаю, и мне нужно отобразить кнопку «Сохранить изменения», если изменяются входные данные.Поскольку мне нужно сразу вставить разделитель тысяч в keyup (если необходимо), эта ошибка действительно раздражает меня и нарушает эту функциональность.

Чтобы воспроизвести ее, перейдите к примеру jsfiddle , откройте консоль в Chromeвведите что-нибудь в первый ввод, событие keyup будет запущено должным образом, затем не сфокусированный ввод с вкладкой или щелчком вне него и событие change не будет запущено.Сделайте то же самое с другим вводом, и change будет запущен.

Я протестировал это в Firefox, и он работает, как и ожидалось.

Версия Chromium, которую я использую, - 14.0.835.202 (Developer Build 103287 Linux) Ubuntu 11.10

и

Пробовал с помощью Google Chrome 15.0.874.106, установленного прямо с веб-сайта Chrome.

Я мог бы добавить разделители в событие change,но так как пользователи будут вводить много цифр из 7 и более цифр, было бы намного лучше, если бы при вводе вставлялись разделители.

Ответы [ 5 ]

8 голосов
/ 20 сентября 2012

Я попробовал его в IE9, и он работает так же, как в Chrome.

Не думаю, что это ошибка.

Использование .val (значение) для элемента HTML сбрасываетфлаг ", измененный вручную ", поэтому событие изменения не произойдет (поскольку пользователь ничего не меняет вручную ПОСЛЕ операция val ()).

6 голосов
/ 14 сентября 2012

Это похоже на допустимую ошибку Chrome. Я предполагаю, что изменение значения сбрасывает все, на что опирается Chrome, чтобы вызвать событие onChange, так как пользователь в последний раз фокусировался на вводе. Я бы предложил использовать обходной путь (к сожалению), который должен работать во всех браузерах.

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

4 голосов
/ 21 сентября 2012

Кажется, такое поведение ожидается.(См. http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change).

В нем упоминается, что если вы программно изменяете значение, вы должны вручную запустить событие.

И в соответствии с https://developer.mozilla.org/en-US/docs/DOM/element.onchange, Mozilla реализует следующие изменения:

  control.onfocus = focus;
  control.onblur = blur;
  function focus () {
      original_value = control.value;
  }

  function blur () {
      if (control.value != original_value)
        control.onchange();
  }

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

blur: function(){
   $(this).change();
}
1 голос
/ 21 сентября 2012

Мне кажется, что такое поведение ... Если значение элемента изменяется с помощью скрипта, то ваша замена не будет запущена. В таких случаях вам нужно сохранить значение onfocus, проверить значение onblur и запустить onchange вручную.

См. Ниже,

DEMO: http://jsfiddle.net/vCxme/6/

$('input#not-gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
        $(this).val($(this).val() + '.');
    },
    change: function(){
       console.log('I\'m a changed input');
    },
    focus: function ( ){
        $(this).data('orig_value', $(this).val());
    },
    blur: function () {
        if ($(this).val() != $(this).data('orig_value')){
            $(this).change();
        }
    }
});
$('input#gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
    },
    change: function(){
       console.log('I\'m a changed input');
    }
});

Приведенная выше реализация взята из псевдокода, начиная с FF onChange

Примечание: Событие изменения браузера не будет вызываться при изменении значения с помощью скрипта.

0 голосов
/ 21 сентября 2012

Я бы подошел с несколько иной точки зрения (так что обойти) проверки значения поля каждый раз, когда выполняется событие keyup.Смотри http://jsfiddle.net/vCxme/3/

...