Zdarzenie „wejściowe” jQuery

Nigdy nie słyszałem o zdarzeniu w jQuery o nazwie input dopóki nie zobaczyłem tego jsfiddle .

Czy wiesz, dlaczego to działa? Czy to pseudonim keyupczy coś?

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

Występuje, gdy treść tekstu elementu jest zmieniana za pomocą interfejsu użytkownika.

To nie jest całkiem alias, keyupponieważ keyupzadziała, nawet jeśli klawisz nic nie robi (na przykład: naciśnięcie, a następnie zwolnienie klawisza Control wywoła keyupzdarzenie).

Dobry sposób, aby o tym pomyśleć, jest następujący: jest to zdarzenie, które wyzwala się przy każdej zmianie danych wejściowych. Obejmuje to między innymi naciskanie klawiszy, które modyfikują dane wejściowe (więc na przykład Ctrlsam w sobie nie wyzwoli zdarzenia, ale Ctrl-Vwklei tekst,), wybierając opcję automatycznego uzupełniania, środek w stylu Linux -kliknij wklej, przeciągnij i upuść i wiele innych rzeczy.

Zobacz tę stronę i komentarze do tej odpowiedzi, aby uzyskać więcej informacji.

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

Jednak nie jest obsługiwany w wersji IE <9. Ale starsze wersje IE mają własne zastrzeżone zdarzenie, onpropertychangektóre robi to samo co oninput.

Możesz więc użyć tego w ten sposób:

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

Aby uzyskać pełne wsparcie przeglądarki crossbrowser.

Ponieważ właściwość może zostać uruchomiona dla KAŻDEJ zmiany właściwości, na przykład zmieniana jest właściwość wyłączona, dlatego należy 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 */
    }
});

Przy użyciu jQuery następujące efekty są identyczne:

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

Jednak wraz ze inputzdarzeniem wydaje się, że tylko drugi wzorzec działa w testowanych przeglądarkach.

Dlatego można oczekiwać, że to zadziała, ale NIE DZIAŁA (przynajmniej obecnie):

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

Ponownie, jeśli chcesz wykorzystać delegację zdarzeń (np. Aby skonfigurować wydarzenie #containerprzed dodaniem twojego input.textdo DOM), powinieneś przyjść na myśl:

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

Niestety znowu to NIE działa!

Działa tylko ten wzór:

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

ZMIENIONO WIĘCEJ AKTUALNYCH INFORMACJI

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

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

TERAZ DZIAŁA także we wszystkich „standardowych” przeglądarkach.

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

Jednak „Zdarzenie oninput jest błędne w programie Internet Explorer 9. Nie jest uruchamiane, gdy znaki są usuwane z pola tekstowego przez interfejs użytkownika tylko po wstawieniu znaków. Chociaż zdarzenie onpropertychange jest obsługiwane w Internet Explorerze 9, ale podobnie do zdarzenie oninput, jest również błędne, nie jest uruchamiane po usunięciu.

Ponieważ znaki można usunąć na kilka sposobów (klawisze Backspace i Delete, CTRL + X, polecenie Wytnij i usuń w menu kontekstowym), nie ma dobrego rozwiązania, aby wykryć wszystkie zmiany. Jeśli znaki zostaną usunięte za pomocą polecenia Usuń z menu kontekstowego, modyfikacji nie można wykryć w JavaScript w Internet Explorerze 9. ”

Mam dobre wyniki wiążące zarówno dane wejściowe, jak i keyupown (i keydown, jeśli chcesz, aby uruchamiał się w IE, przytrzymując klawisz Backspace).

Zachowaj ostrożność podczas korzystania z WEJŚCIA. To wydarzenie jest uruchamiane podczas ustawiania ostrości i rozmycia w IE 11. Jest ono jednak wywoływane po zmianie w innych przeglądarkach.

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

Myślę, że „wejście” po prostu działa tutaj tak samo, jak „oninput” w modelu zdarzeń DOM poziomu O.

Nawiasem mówiąc:

Tak jak to skomentował Silkfire, ja też googłem na „zdarzenie wejściowe jQuery”. Zaprowadzono mnie tutaj i byłem zaskoczony, gdy dowiedziałem się, że „input” jest akceptowalnym parametrem polecenia bind () jquery . W jQuery in Action (s. 102, wyd. 2008) „wejście” nie jest wspomniane jako możliwe zdarzenie (przeciwko 20 innym, od „rozmycia” do „rozładowania”). Prawdą jest, że na str. 92, przeciwnie, można się domyślać z ponownego czytania (tj. Z odwołania do różnych identyfikatorów ciągów między modelami poziomu 0 i poziomu 2). To jest dość mylące.

jQuery ma następującą sygnaturę dla .on()metody:.on( events [, selector ] [, data ], handler )

Zdarzeniami może być dowolny z wymienionych w tym dokumencie:

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

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

Mozilla stwierdza, co do zdarzenia wejściowego:

Zdarzenie wejściowe DOM jest uruchamiane synchronicznie, gdy zmienia się wartość elementu lub elementu. Dodatkowo uruchamia się na edytowalnych edytorach, gdy zmienia się jego zawartość.

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

działa zarówno w IE, jak i chrome