Правильная обработка события изменения входных данных

ProgramBox

Правильная обработка события изменения входных данных

Post author:admin
Запись опубликована:25 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Возможно, это правильное поведение события изменения, но приведенное ниже поведение немного раздражает. Когда значение обновляется из истории полей (см. Объяснение ниже), событие не запускается.

Пожалуйста, смотрите пример кода ниже. поле ввода результата обновляется с изменением в поле ввода ‘input1’. Форма и кнопка отправки не совсем актуальны, но необходимы для отправки формы, чтобы браузер сохранял историю значений полей. Для тестирования:

введите любые входные данные в поле (скажем, ABC)
Отправьте форму
введите первый символ входных данных из 1 (A)
используйте стрелку вниз, чтобы выбрать предыдущее значение Enter
или используйте мышь, чтобы выбрать предыдущее значение из истории, изменение ввода не обнаружено.

Какое событие / как следует изменить в этом коде, чтобы событие генерировалось всякий раз, когда изменяется входное значение.

Спасибо.

 <html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
    Result:<input type="text" id="result" readonly></input>

    <form method="post" action=""> 
        <input type="text" id="input1" />   
        <button type=submit>Submit</button>
    </form>
    <script >
        $(document).ready(function() {          
            $('#input1').change(
                function(){
                $('#result').val($('#input1').val());
            });      
        }); 
    </script>
</body>
</html>

1. Вот jsFiddle, который воспроизводит проблему, обратите внимание, что вы должны ввести несколько значений для отображения предложений. jsfiddle.net/kaptZ

2. ваш пример работает для меня в последней версии chrome. вам нужно размыть поле, чтобы заставить работать верхнее поле.

Ответ №1:

Я думаю, что это не имеет никакого отношения к jQuery.

Событие изменения должно быть отправлено, когда содержимое элемента управления изменилось и элемент управления теряет фокус. На практике реализация события изменения в браузерах непоследовательна, например, Firefox отправляет событие изменения при нажатии переключателей, а не при потере фокуса. Также в IE выбор значения из списка предыдущих значений, затем вызывающий событие размытия, не запускает событие изменения.

Обратите внимание, что для успешного выполнения элементов управления формой они должны иметь атрибут name со значением. Простой тестовый пример — это:

 <form action="#"> 
    <input type="text" name="input1" onchange="alert('changed');">   
    <input type="submit">
</form>

Одним из решений является использование вместо этого события blur и сравнение текущего значения элемента управления с его значением по умолчанию — если они отличаются, выполните все, что вы собирались сделать для события изменения. Если значение может быть изменено несколько раз, после первого раза вам нужно сравнить с последним значением onblur, а не с значением по умолчанию.

В любом случае, вот функция, которую можно вызвать в blur, чтобы увидеть, изменился ли ввод текста. Над этим нужно немного поработать, если вы хотите использовать его с другими типами управления формами, но я не думаю, что это необходимо.

 <form action="#"> 
    <input type="text" name="input1" onblur="
      var changed = checkChanged(this);
      if (changed[0]) {
        alert('changed to: '   changed[1]);
      }
    ">   
    <input type="submit">
</form>

<script type="text/javascript">

// For text inputs only
var checkChanged = (function() {

  var dataStore = [];

  return function (el) {
    var value = el.value,
        oValue;

    for (var i=0, iLen=dataStore.length; i<iLen; i =2) {

      // If element is in dataStore, compare current value to
      // previous value
      if (dataStore[i] == el) {
        oValue = dataStore[  i];

        // If value has changed...
        if (value !== oValue) {
          dataStore[i] = value;
          return [true, value]; 

        // Otherwise, return false
        } else {
          return [false, value];
        }
      }
    }

    // Otherwise, compare value to defaultValue and
    // add it to dataStore
    dataStore.push(el, value);
    return [(el.defaultValue != value), value];
  }

}());
</script>

Ответ №2:

Попробуйте keyup событие:

     $(document).ready(function() {          
        $('#input1').keyup(
            function(){
            $('#result').val($('#input1').val());
        });      
    });

http://jsfiddle.net/kaptZ/7/

Ответ №3:

Похоже, это определенно ошибка браузера. Вы мало что можете сделать, кроме как реализовать свой собственный обработчик изменений с фокусом и размытием. Этот пример не очень подходит для повторного использования, но он решил проблему и может быть использован в качестве вдохновения для чего-то многоразового.

http://jsfiddle.net/kaptZ/9/

 var startValue;
var input1 = $('#input1');

input1.focus(function(){
    startValue = this.value;
});

input1.blur(function(){
    if (this.value != startValue) {
        $('#result').val(this.value);
    }
});

Грязной альтернативой является использование автозаполнения =»выкл.»

1. у меня это не работает… Я пробовал как Chrome, так и Iceweasel (Firefox)

2. Что не работает? Я попробовал это в Chrome и FF, и это сработало. Вы уверены, что у вас есть правильная ссылка на правильную версию jsFiddle? jsfiddle.net/kaptZ/9 Вы должны покинуть поле после выбора записи с помощью мыши или нажав enter

3. Спасибо.. Я думал, что это может сработать сразу после выбора, а не после нажатия на какое-либо место в scree / других полях.. Мой код является частью экрана, где поле «результат» обновляется через ajax при изменении входного значения.. немного странно, что поле «результат» не меняется даже после того, как пользователь сделал выбор. Итак, в приведенном выше случае событие запускается только в том случае, если пользователь смещает фокус с поля ввода .. это может сбивать с толку, поскольку они могут ожидать, что результат будет обновлен, когда в поле ввода будет правильное значение..

4. Ну, обработчик изменений не вызывается при вводе по замыслу, только когда вы покидаете поле, это то, что эмулировалось.

Ответ №4:

Похоже на эту ошибку, которая должна была быть исправлена в ноябре 2009 года.

В современных браузерах вы можете использовать input событие и обновлять его по мере ввода. Это может быть привязано либо к текстовому вводу:

 $('#input1').bind('input', function(){
    $('#result').val($('#input1').val());
});

Или в форму:

 $('#input1').closest('form').bind('input', function(){
    $('#result').val($('#input1').val());
});