Zdarzenie "input" jQuery

oninput zdarzenie jest bardzo przydatne do śledzenia zmian pól wejściowych.

Nie jest jednak obsługiwany w wersji IE onpropertychange, które robi to samo co oninput.

Więc możesz go użyć w ten sposób:

$(':input').on('input propertychange');

Aby mieć pełną obsługę crossbrowser.

Ponieważ właściwość propertychange może zostać uruchomiona dla każdej zmiany właściwości, na przykład, właściwość wyłączona zostanie zmieniona, wtedy chcesz to zrobić:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Używając jQuery, poniższe są identyczne w efekcie:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

Przy zdarzeniu input, jednak tylko drugi wzorzec wydaje się działać w przeglądarkach, które testowałem.

Tak więc, można się spodziewać, że to zadziała, ale tak nie jest (przynajmniej obecnie):

$(':text').input(function(){ doSomething(); });

Ponownie, jeśli chcesz wykorzystać delegację zdarzeń (np. skonfigurować Zdarzenie na #container, zanim twoje input.text zostanie dodane do DOM), powinno to przyjść na myśl:

$('#container').on('input', ':text', function(){ doSomething(); });

Niestety, znowu nie działa obecnie!

Tylko ten wzór działa:

$(':text').on('input', function(){ doSomething(); });

EDITED WITH MORE CURRENT INFORMATION

Z pewnością mogę potwierdzić ten wzór:

$('#container').on('input', ':text', function(){ doSomething(); });

Teraz działa również we wszystkich 'standardowych' przeglądarkach.

Jak powiedział claustrofob, oninput jest obsługiwany dla IE9+.

Jednak, "Zdarzenie oninput jest wadliwe w przeglądarce Internet Explorer 9. Nie jest wywoływana, gdy znaki są usuwane z pola tekstowego za pośrednictwem interfejsu użytkownika tylko wtedy, gdy znaki są wstawiane. Chociaż Zdarzenie onpropertychange jest obsługiwane w przeglądarce Internet Explorer 9, ale podobnie jak Zdarzenie oninput, jest również błędne, nie jest wywoływane przy usuwaniu.

Ponieważ znaki można usuwać na kilka sposobów (Backspace i Usuń klawisze, CTRL + X, Wytnij i usuń polecenie w menu kontekstowym), nie ma dobrego rozwiązania do wykrywania wszystkich zmian. Jeśli znaki są usuwane za pomocą polecenia Usuń z menu kontekstowego, modyfikacji nie można wykryć w języku JavaScript w przeglądarce Internet Explorer 9."

Mam dobre wyniki związane zarówno z input i keyup (i keydown, jeśli chcesz, aby odpalić w IE trzymając klawisz Backspace).

Bądź ostrożny podczas korzystania z INPUT. To zdarzenie zostanie wywołane przy ustawieniu ostrości i rozmyciu w IE 11. Ale jest wyzwalany przy zmianie w innych przeglądarkach.

Https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Myślę ,że 'input' działa tutaj tak samo jak 'ONINPUT' w modelu zdarzeń poziomu DOM O.

Nawiasem mówiąc:

Tak jak skomentował to silkfire, ja też wygooglowałem dla 'jQuery input event'. Tak więc zostałem doprowadzony do tego i zdumiony, aby dowiedzieć się, że 'input' jest akceptowalnym parametrem dla polecenia bind() jquery. W jQuery w działaniu (P. 102, 2008 wyd.) 'input 'nie jest wymieniany jako możliwe Zdarzenie (w porównaniu z 20 innymi, od' blur 'do'unload'). To prawda, że na p... 92, przeciwnie, można przypuszczać z ponownego odczytu (tj. z odniesienia do różnych identyfikatorów łańcuchów między modelami poziomu 0 i poziomu 2). To dość mylące.

JQuery ma następujący podpis dla metody .on(): .on( events [, selector ] [, data ], handler )

Zdarzenia może być każdy z tych wymienionych w tym odsyłaczu:

Https://developer.mozilla.org/en-US/docs/Web/Events

Jednak nie wszystkie są obsługiwane przez każdą przeglądarkę.

Mozilla stwierdza, co następuje na temat zdarzenia input:

Zdarzenie wejściowe DOM jest wywoływane synchronicznie, gdy wartość lub element jest zmieniony. Dodatkowo odpala na contenteditable redaktorów po zmianie jego treści.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

Praca zarówno w IE jak i chrome