событие изменения javascript на элементе ввода срабатывает только при потере фокуса

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

<input type="text" id="name" onchange="checkLength(this.value)" />

- - - - onchange не срабатывает при изменении содержимого имени, а только срабатывает, когда имя выходит из фокусировать.

есть ли что-то, что я могу сделать, чтобы это событие работало над изменением контента? или какое-то другое событие, которое я могу использовать для этого? Я нашел обходной путь с помощью функции onkeyup, но это не срабатывает, когда мы выбираем некоторый контент из автоматического завершения браузера.

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

6 66
javascript jquery javascript-events

6 ответов:

(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

это будет поймать change, нажатия клавиш, paste,textInput,input (при наличии). И не стреляйте больше, чем нужно.

http://jsfiddle.net/katspaugh/xqeDj/

ссылки:

textInput - тип события уровня 3 W3C DOM. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

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

input - an HTML5 тип события.

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

Firefox, Chrome,IE9 и другие современные браузеры поддерживают его.

это событие происходит сразу после изменения, в отличие от события onchange, которое происходит, когда элемент теряет фокус.

101

как расширение для ответа кэтспо, вот способ сделать это для нескольких элементов с помощью CSS-класс.

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });
8

сделайте это способом jQuery:

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


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});
2

вы можете использовать onkeyup

<input id="name" onkeyup="checkLength(this.value)" />
0

вам придется использовать комбинацию onkeyup и onclick (или onmouseup) Если вы хотите, чтобы поймать все возможности.

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />
0

вот еще одно решение, которое я разрабатываю для той же проблемы. Однако я использую много полей ввода, поэтому я сохраняю старое значение как пользовательский атрибут самих элементов:"data-value". С помощью jQuery это так легко управлять.

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

вот, я использовал 5-6 входных полей имеют класс 'filterBox', Я заставляю метод filterBy работать только в том случае, если значение данных отличается от его собственного значения.

0