Procedura obsługi OnChange jest wywoływana po zmianie dowolnego pola wejściowego lub kliknięciu dowolnego przycisku.

Argument Nazwa zawiera małą literę nazwy pola wejściowego lub przycisku.

Przykład: Procedura OnChange(Nazwa: String); Zaczynać // Jeśli zmienią się pola ceny lub ilości, oblicz kwotę Jeśli Nazwa="cena" Lub Nazwa="cnt" To Summa:= RoundMul(Cena, Cnt, 2); // Jeśli pole kwoty ulegnie zmianie, oblicz cenę. Jeśli nazwa="suma" To cena:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Koniec;

Podobny efekt można osiągnąć za pomocą procedur obsługi OnPriceChange, OnCntChange i OnSummaChange.

Przykład: Procedura OnPriceChange; Rozpocznij Summa:= RoundMul(Cena, Cnt, 2); Koniec; Procedura OnCntChange; Rozpocznij Summa:= RoundMul(Cena, Cnt, 2); Koniec; Procedura OnSummaChange; Cena początkowa:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Koniec;

Ten moduł obsługi jest wygodny w użyciu podczas organizowania modułowości, ponieważ zbiera informacje o prawie wszystkich zdarzeniach. Na przykład:

Var BaseClass: Wariant; Procedura OnCreate; Rozpocznij BaseDocument.Init(Self); // Utwórz klasę bazową i wymieniaj się z nią referencjami. Inicjowanie dokumentu. Koniec; Procedura OnChange(Nazwa: String); Rozpocznij BaseClass.OnChange(Nazwa); // Przekazywanie zdarzeń do klasy bazowej Koniec;

Lub przykład modułowości przy użyciu singletonu (właściwość modułu w zakładce Opis edytora):

Procedura OnCreate; Rozpocznij BaseClass.OnCreate(Self); // Zainicjuj dokument. Koniec; Procedura OnChange(Nazwa: String); Rozpocznij BaseClass.OnChange(Self, Name); // Przekazywanie zdarzeń do klasy bazowej. Koniec;

Ustawia procedurę obsługi zmian dany element form lub uruchamia to zdarzenie. Metoda ma trzy przypadki użycia:

handler(eventObject) - funkcja, która zostanie ustawiona jako procedura obsługi. Po wywołaniu otrzyma obiekt zdarzenia obiekt zdarzenia .

handler(eventObject) - patrz wyżej.
eventData - dodatkowe dane przekazywane do handlera. Muszą być reprezentowane przez obiekt w formacie: (fNazwa1:wartość1, fNazwa2:wartość2, ...) .

Zainstalowaną procedurę obsługi można usunąć za pomocą metody unbind().

Wszystkie trzy możliwości użycia metody są odpowiednikami innych metod (patrz wyżej), więc wszystkie szczegóły użycia metody Change() można znaleźć w opisie tych metod.

Przypomnijmy, że zdarzenie zmiany nie następuje bezpośrednio w momencie zmiany, ale dopiero wtedy, gdy zmieniony element formularza traci ostrość.

Przykład

// ustaw procedurę obsługi zdarzenia zmiany na element o identyfikatorze foo $("#foo") .change (function () ( alert („Element foo został zmieniony.” ) ; ) ); // wywołaj zdarzenie zmiany elementu foo $("#foo" ) .change () ; // zainstaluj kolejną procedurę obsługi zdarzeń zmiany, tym razem dla elementów // z klasą blokową. Przekażmy dodatkowe dane do procedury obsługi $(.block") .change (( a: 12 , b: "abc") , funkcja (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alert („Zmieniono element z blokiem klasy. „ + „ Do obsługi tego zdarzenia zostały przekazane następujące dane: „ + externalData ) ; ) ) ;

Występuje natychmiast po zmianie wartości elementu, a zdarzenie onchange występuje, gdy element traci fokus. Kolejną różnicą jest to, że zdarzenie onchange ma szerszą obsługę przeglądarek i działa z elementami takimi jak , i jest bardziej rozbudowane w przypadku .

Obsługa przeglądarki Atrybut wydarzeń
Opera
Eksplorator
krawędź

na zmianę	Tak	Tak	Tak	Tak	Tak	Tak

Przykład użycia składni

Przykład wyświetlania tekstu wpisanego w elemencie podczas zmiany fokusu, przy użyciu atrybutu zdarzenia onchange. Zauważ, że gdybyśmy użyli atrybutu zdarzenia oninput, tekst zostałby wyświetlony natychmiast, a nie po zmianie fokusu.

wydarzenie onchange

Wpisz dowolny tekst i usuń fokus z elementu:

funkcja testFunction() ( var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "Wpisałeś następujący tekst: " + x; )

Wpisz dowolny tekst i usuń fokus z elementu:

Przykład wyprowadzenia wartości tagu (elementu listy rozwijanej) przy użyciu atrybutu zdarzenia onchange.

wydarzenie onchange

Wybierz życzenie z listy:

Pragnienie 1 Pragnienie 2 Pragnienie 3

funkcja życzenieFunction() ( var z = document.getElementById("lista życzeń" ).value; document.getElementById("info" .innerHTML = "Wybrałeś: " + z; )

Wybierz życzenie z listy:

Pragnienie 1 Pragnienie 2 Pragnienie 3

Spójrzmy na przykład zmiany obrotu 2D elementu za pomocą Właściwość CSS przekształcać Atrybut HTML zdarzenia i funkcje onchange w JavaScript:

Dwuwymiarowy obrót elementu w CSS #test ( szerokość : 100px ; /* ustaw szerokość bloku */ wysokość : 100px ; /* ustaw wysokość bloku */ margines : 20px ; /* ustaw ilość margines ze wszystkich stron elementu */ border : 1px jednolity pomarańczowy ; /* ustaw jednolitą pomarańczową ramkę o wielkości 1px */ tło : khaki ; /* ustaw kolor tła */ transform : obróć(0deg) ; /* ustaw brak Obrót 2D */ -webkit-transform : obróć (0 stopni ) ; -ms-transform : obróć (0 stopni) ; /* w celu obsługi wcześniejszych wersji przeglądarek */ ) funkcja obróć (wartość) ( /* utwórz funkcję do zmiany wartość stylu elementu o id = test, wyświetlająca wynik zmiany elementu o id = wynik i obsługa wcześniejszych wersji przeglądarek */ document.getElementById("test" ).style.webkitTransform = "rotate(" + wartość + "stopień)" ; document.getElementById("test" ).style.msTransform = "rotate( " + wartość + "stopień)" ; /* obsługa wcześniejszych wersji przeglądarek */ document.getElementById("test" ). style.MozTransform = "obróć(" + wartość + "stopień)"; /* obsługa wcześniejszych wersji przeglądarek */ document.getElementById("test" ).style.transform = "rotate(" + wartość + "stopień)" ; document.getElementById("result" ).innerHTML = wartość + "stopień" ; )

Przesuń suwak, aby obrócić element:

transformacja: obrót (0 stopni); Obróć mnie _element"> element HTML Wybierz smak lodów: Wybierz jeden… Czekoladowy Sardynka Waniliowy

Treść (wyświetlanie: siatka; obszary szablonu siatki: „wybierz wynik”; ) wybierz ( obszar siatki: wybierz; ) .result ( obszar siatki: wynik; )

JavaScript constselectElement = document.querySelector(.ice-cream"); selectElement.addEventListener("change", (event) => ( const wynik = document.querySelector(.result"); wynik.textContent = `Lubisz $(event.target.value)`; )); Wynik Element wejściowy tekstu

W przypadku niektórych elementów, w tym zdarzenia zmiany, nie zostanie ono uruchomione, dopóki element sterujący nie straci fokusu. Spróbuj wpisać coś w polu poniżej, a następnie kliknij gdzie indziej, aby wywołać zdarzenie.

HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("zmiana", aktualizacjaWartość); funkcja updateValue(e) ( log.textContent = e.target.value; ) Specyfikacja wyników Stan specyfikacji

Standard życia HTML Definicja „zmiany” w tej specyfikacji.	Standard życia

Zgodność przeglądarki

Tabela zgodności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz przyczynić się do gromadzenia danych, odwiedź https://github.com/mdn/browser-compat-data i wyślij nam prośbę o ściągnięcie.

Zaktualizuj dane dotyczące zgodności w GitHub

Komputer stacjonarny Chrome Edge Firefox Internet Explorer Opera Safari Przeglądarka internetowa na Androida Chrome na Androida Firefox na Androida Opera na Androida Safari na iOS Samsung Internetna zmianę

Pełna obsługa Chrome Tak	Edge Pełne wsparcie 12	Pełna obsługa przeglądarki Firefox Tak	IE Pełne wsparcie Tak	Opera Pełne wsparcie Tak	Safari Pełne wsparcie Tak	WebView Android Pełna obsługa Tak	Chrome Android Pełna obsługa Tak	Pełna obsługa przeglądarki Firefox Android Tak	Opera Android Pełna obsługa Tak	Pełna obsługa Safari iOS Tak	Samsung Internet Android Pełne wsparcie Tak

Legenda Pełne wsparcie Pełne wsparcie

Różne przeglądarki nie zawsze są zgodne, czy w przypadku określonych typów interakcji należy uruchomić zdarzenie zmiany. Na przykład nawigacja za pomocą klawiatury w elementach nigdy nie uruchamiała zdarzenia zmiany w Gecko, dopóki użytkownik nie nacisnął klawisza Enter lub nie przełączył fokusu z (patrz błąd 126379). Jednak od wersji Firefox 63 (Quantum) to zachowanie jest spójne we wszystkich głównych przeglądarkach.

Mam element wejściowy i chcę na bieżąco sprawdzać długość treści i ilekroć długość osiągnie określony rozmiar, chcę włączyć przycisk przesyłania, ale mam problem ze zdarzeniem onchange javascript, ponieważ zdarzenie jest uruchamiane tylko wtedy, gdy element wejściowy wychodzi poza zakres, a nie w przypadku zmiany treści.

Onchange nie uruchamia się, gdy zmienia się zawartość nazwy, ale uruchamia się tylko wtedy, gdy nazwa traci ostrość.

Czy można coś zrobić, aby to wydarzenie działało i zmieniało treść? lub inne wydarzenie, które mogę w tym celu wykorzystać? Znalazłem obejście za pomocą funkcji onkeyup, ale nie działa, gdy wybieramy jakąś treść z automatycznego dodawania przeglądarki.

Chcę czegoś, co będzie działać, gdy zmieni się zawartość pola, klawiatury lub myszy... jakieś pomysły?

(funkcja () ( var oldVal; $("#nazwa").on("zmień wejście tekstowe", funkcja () ( var val = this.value; if (val !== oldVal) ( oldVal = val; checkLength( val); ) )); )());

Spowoduje to przechwycenie zmian, naciśnięć klawiszy, wklejenia, wejścia tekstowego i wejścia (jeśli jest dostępne). I nie strzelaj więcej niż to konieczne.

Agent użytkownika musi wywołać to zdarzenie, gdy napotkany zostanie jeden lub więcej znaków. Znaki te mogą pochodzić z różnych źródeł, na przykład znaków powstałych w wyniku naciśnięcia lub zwolnienia klawisza na klawiaturze, przetwarzania edytora metody wprowadzania lub w wyniku Komenda głosowa. Jeżeli operacja „wklej” generuje prosty ciąg znaków, czyli przejście tekstowe bez informacji o strukturze i stylu, należy wygenerować również ten typ zdarzenia.

Cytat blokowy>

Uruchamiane w kontrolkach, gdy użytkownik zmienia wartość

Cytat blokowy>

Będziesz musiał użyć kombinacji onkeyup i onclick (lub onmouseup), jeśli chcesz złapać jakąkolwiek okazję.

Oto inne rozwiązanie, które opracowuję dla tego samego problemu. Używam jednak wielu pól wejściowych, więc przechowuję starą wartość jako zdefiniowany przez użytkownika atrybut samych elementów: „wartość-danych”. Korzystanie z jQuery tak łatwe w zarządzaniu.

$(document).delegate(.filterBox", "keyup", ( self: this ), funkcja (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("wartość-danych", ""); self.filterBy(this, true) ) else ( if ($(this).attr("wartość-danych") ! = $(this).val()) ( $(this).attr("wartość-danych", $(this).val()); self.filterBy(this); ) ) ));

tutaj użyłem 5-6 pól wejściowych, mam klasę filterBox, wykonuję metodę filterBy tylko wtedy, gdy wartość danych różni się od własnej wartości.