Zdarzenie „wejściowe” jQuery

206

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() {});
jedwabny ogień
źródło
12
Z wyjątkiem changepożarów, gdy pole straciło ostrość. inputstrzela natychmiast.
jcsanyi
3
Próbowałeś go przeszukać?
niezdefiniowany
2
@ nieokreślony Tak mam, inaczej nie stworzyłbym dla niego pytania. W Google pojawiają się tylko artykuły o tym input elemencie i sposobie dołączania do niego zdarzeń.
Silkfire
3
To pytanie pięknie odpowiada na wszystkie pojęcia - stackoverflow.com/questions/15727324/…
GemK,

Odpowiedzi:

197

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 stronę i komentarze do tej odpowiedzi, aby uzyskać więcej informacji.

J David Smith
źródło
11
Czy wiesz, czy jQuery uzupełnia brakującą obsługę przeglądarki? (Niespójności IE8, IE9 itp.)
jcsanyi
4
Właśnie przejrzałem „zdarzenie wejściowe js”. Jest talent do wiedzieć, jakich warunków użyć, aby znaleźć to, czego chcesz w Google; pochodzi z doświadczeniem. A potem, oczywiście, Google rejestruje wszystko i używa go, aby dowiedzieć się, czego naprawdę chcesz. Większość moich wyszukiwań dotyczy dokumentów API i pytań programistycznych, więc z czasem nauczyłem się, że kiedy szukam rzeczy, prawdopodobnie powinienem pokazywać dokumenty API i odpowiedzi programowe.
J David Smith
3
Cóż, szukałem „zdarzenia wejściowego jQuery”, nie miałem pojęcia, że ​​to było oryginalne zdarzenie JS. To samo tutaj, pierwsze wyniki zwykle pochodzą z SO, które uważam głównie za de facto odpowiedzi / oficjalne źródła informacji.
Silkfire
18
inputjest w rzeczywistości czymś więcej niż tylko filtrowanym keyup, na przykład będzie uruchamiany, gdy wartość zostanie wybrana z listy wcześniej używanych wartości ... Było to coś, co bardzo trudno byłoby obsłużyć, gdyby nie było żadnego inputzdarzenia.
szeryf
2
oninputuruchamia się również, gdy tekst jest zmieniany za pomocą myszy (przeciągnij i upuść, lub kliknij menu prawym przyciskiem myszy lub kliknij środkowym przyciskiem myszy, aby wkleić).
Denilson Sá Maia
157

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 */
    }
});
klaustrofob
źródło
10
Dokładnie to, czego potrzebowałem. Dziękuję Ci. (Nienawidzę konieczności obsługi <IE9.)
DaleyKD
Więcej informacji: „Opera nie uruchamia zdarzenia wejściowego po upuszczeniu tekstu w polu wejściowym. IE 9 nie uruchamia zdarzenia wejściowego, gdy użytkownik usuwa znaki z danych wejściowych wypełnionych przez klawiaturę, wycinanie lub przeciąganie”. developer.mozilla.org/en-US/docs/Web/Events/…
tkane2000
Wystąpił problem z tym kodem. Jeśli maksymalna wartość jest ustawiona na elemencie wejściowym, zdarzenie „wejściowe” jest wyzwalane, nawet gdy maksymalna długość zostanie osiągnięta, a wartość nie zostanie zmieniona
nivcaner
Ale dlaczego nie tylko dwie osobne funkcje? W ten sposób nie trzeba sprawdzać typu zdarzenia ani nazwy właściwości. Kod może znajdować się w trzeciej wspólnej funkcji.
ADTC
17

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.

Ifedi Okonkwo
źródło
2

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).

Zook
źródło
1

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.

Brice Coustillas
źródło
Dzięki za wkład (bez zamierzonej gry słów), wydaje się to teraz oficjalny wątek! :)
silkfire,
0

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ść.

Robert Rocha
źródło
-8
$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

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

Raj
źródło
bindjest przestarzałe, użyjon
Tushar