Az OnChange kezelő akkor kerül meghívásra, ha bármely beviteli mező megváltozik, vagy bármelyik gombra kattintanak.

A Név argumentum a beviteli mező vagy gomb kisbetűs nevét tartalmazza.

Példa: Procedure OnChange(Név: String); Kezdődik // Ha az ár vagy a mennyiség mező megváltozott, akkor számítsa ki az összeget If Name="price" Or Name="cnt" Then Summa:= RoundMul(ár, Cnt, 2); // Ha az összeg mező megváltozott, akkor számítsa ki az árat. If Name="summa" Then Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Vége;

Hasonló hatás érhető el az OnPriceChange, OnCntChange és OnSummaChange kezelők használatával.

Példa: Procedure OnPriceChange; Begin Summa:= RoundMul(ár, Cnt, 2); Vége; Eljárás OnCntChange; Begin Summa:= RoundMul(ár, Cnt, 2); Vége; Eljárás OnSummaChange; Kezdőár:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Vége;

Ez a kezelő kényelmesen használható modularitás szervezésekor, mivel szinte minden eseményről gyűjt információkat. Például:

Var BaseClass: Variant; Eljárás OnCreate; Kezdje a BaseDocument.Init(Self); // Hozzon létre egy alaposztályt és cserélje ki vele a hivatkozásokat. A dokumentum inicializálása. Vége; Procedure OnChange(Név: String); Begin BaseClass.OnChange(Name); // Események átadása az alaposztálynak Vége;

Vagy egy példa a modularitásra szingli használatával (modul tulajdonság a szerkesztő Leírás lapján):

Eljárás OnCreate; Kezdje a BaseClass.OnCreate(Self); // Inicializálja a dokumentumot. Vége; Procedure OnChange(Név: String); Begin BaseClass.OnChange(Self, Name); // Események átadása az alaposztálynak. Vége;

Beállítja a változáskezelőt adott elem vagy aktiválja ezt az eseményt. A módszernek három felhasználási esete van:

handler(eventObject) - egy függvény, amely kezelőként lesz beállítva. Híváskor eseményobjektumot kap eventObject .

handler(eventObject) - lásd fent.
eventData – a kezelőnek továbbított további adatok. Ezeket egy objektummal kell ábrázolni a következő formátumban: (fName1:value1, fName2:value2, ...) .

A telepített kezelőt az unbind() metódussal távolíthatja el.

A módszer használatának mindhárom lehetősége más metódusok analógja (lásd fent), így a change() használatának minden részlete megtalálható ezen módszerek leírásában.

Emlékezzünk vissza, hogy a változási esemény nem közvetlenül a változás pillanatában következik be, hanem csak akkor, amikor a megváltozott űrlapelem elveszíti a fókuszt.

Példa

// változás eseménykezelőt állítunk be a foo azonosítójú elemre $("#foo" ) .change (function () ( alert ("A foo elem megváltozott." ) ; ) ; // a változás esemény meghívása a foo elemen $("#foo" ) .change () ; // egy másik változási eseménykezelő telepítése, ezúttal a blokkosztályú elemekhez //. Adjunk át további adatokat a kezelőnek $(.block" ) .change (( a: 12 , b: "abc" ) , function (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alert (" Egy osztályblokkot tartalmazó elem megváltozott. " + " A következő adatok kerültek átadásra az esemény kezelőjének: " + externalData ) ; ) );

Közvetlenül az elem értékének megváltozása után következik be, és az onchange esemény akkor következik be, amikor az elem elveszti a fókuszt. Egy másik különbség az, hogy az onchange esemény szélesebb böngészőtámogatással rendelkezik, és olyan elemekkel működik együtt, mint például a , és a .

Böngésző támogatás Események attribútum
Opera
IExplorer
Él

váltáskor	Igen	Igen	Igen	Igen	Igen	Igen

Szintaxis használati példa

Példa egy elembe beírt szöveg megjelenítésére, amikor a fókusz megváltozik, az onchange eseményattribútum használatával. Vegye figyelembe, hogy ha az oninput esemény attribútumot használtuk volna, akkor a szöveg azonnal megjelent volna, nem pedig a fókusz megváltozásakor.

onchange esemény

Írjon be bármilyen szöveget, és távolítsa el a fókuszt az elemről:

function testFunction() ( var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "A következő szöveget írta be: " + x; )

Írjon be bármilyen szöveget, és távolítsa el a fókuszt az elemről:

Példa egy címke (legördülő listaelem) értékének az onchange eseményattribútum használatával történő kiadására.

onchange esemény

Válassz egy kívánságot a listából:

1. vágy 2. vágy 3. vágy

function wishFunction() ( var z = document.getElementById("kívánságlista" ).value; document.getElementById("info" ).innerHTML = "A következőket választotta: " + z; )

Válassz egy kívánságot a listából:

1. vágy 2. vágy 3. vágy

Nézzünk egy példát egy elem 2D-s elforgatásának megváltoztatására a segítségével CSS tulajdonságátalakítani HTML attribútum onchange események és függvények JavaScriptben:

Egy elem kétdimenziós elforgatása a CSS-ben #teszt ( szélesség : 100 képpont ; /* a blokk szélességének beállítása */ magasság : 100 képpont ; /* a blokk magasságának beállítása */ margó : 20 képpont ; /* a blokk méretének beállítása margó az elem minden oldalához */ keret : 1 képpont tömör narancssárga ; /* tömör, 1 képpontos narancssárga keret beállítása */ háttér : khaki ; /* háttérszín beállítása */ transzformáció : forgatás(0deg) ; /* beállítása nincs 2D forgatás */ -webkit-transform : rotate(0deg ) ; -ms-transform : rotate(0deg) ; /* a böngészők korábbi verzióinak támogatásához */ ) függvény rotate(value) (/* függvény létrehozása a változtatáshoz egy id = test elem stílusértéke, az id = eredmény elem változásának eredményének megjelenítése és a böngésző korábbi verzióinak támogatása */ document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg)" ; document.getElementById("test" ).style.msTransform = "rotate( " + value + "deg)" ; /* a böngésző korábbi verzióinak támogatása */ document.getElementById("teszt" ). style.MozTransform = "rotate(" + value + "deg)" ; /* korábbi böngészőverziók támogatása */ document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("eredmény" ).innerHTML = érték + "deg" ; )

Mozgassa a csúszkát az elem elforgatásához:

transzformáció: rotate( 0deg ); Rotate me _element"> elem HTML Válasszon egy fagylalt ízt: Válasszon egyet… Csokoládé Szardínia vanília

Body ( display: grid; grid-template-areas: "select result"; ) select ( grid-area: select; ) .result ( grid-area: result; )

JavaScript const selectElement = document.querySelector(.ice-cream"); selectElement.addEventListener("change", (event) => ( const result = document.querySelector(.result"); result.textContent = `Tetszik $(event.target.value)`; )); Eredmény Szövegbeviteli elem

Egyes elemek, köztük a változási esemény nem indul el, amíg a vezérlő el nem veszíti a fókuszt. Próbáljon meg beírni valamit az alábbi mezőbe, majd kattintson valahova az esemény aktiválásához.

HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("napló"); input.addEventListener("módosítás", updateValue); függvény updateValue(e) ( log.textContent = e.target.value; ) Eredményspecifikációk Specifikáció állapota

HTML Living Standard A „változás” meghatározása az adott specifikációban.	Életszínvonal

Böngésző kompatibilitás

Az ezen az oldalon található kompatibilitási táblázat strukturált adatokból készült. Ha hozzá szeretne járulni az adatokhoz, kérjük, nézze meg a https://github.com/mdn/browser-compat-data webhelyet, és küldjön lehívási kérelmet.

Frissítse a kompatibilitási adatokat a GitHubon

Asztali mobil Chrome Edge Firefox Internet Explorer Opera Safari Android webnézet Chrome Androidra Firefox Androidra Opera Androidra Safari iOS rendszeren Samsung Internetváltáskor

Chrome Teljes támogatás Igen	Edge Teljes támogatás 12	Firefox Teljes támogatás Igen	IE Teljes támogatás Igen	Opera Teljes támogatás Igen	Safari Teljes támogatás Igen	WebView Android Teljes támogatás Igen	Chrome Android Teljes támogatás Igen	Firefox Android Teljes támogatás Igen	Opera Android Teljes támogatás Igen	Safari iOS Teljes támogatás Igen	Samsung Internet Android Teljes támogatás Igen

Jelmagyarázat Teljes támogatás Teljes támogatás

A különböző böngészők nem mindig értenek egyet abban, hogy bizonyos típusú interakciók esetén ki kell-e indítani a változási eseményt. Például a billentyűzettel történő navigáció az elemekben soha nem indított el változási eseményt a Gecko-ban, amíg a felhasználó meg nem nyomta az Enter billentyűt, vagy el nem fordította a fókuszt (lásd a 126379-es hibát). A Firefox 63 (Quantum) óta azonban ez a viselkedés minden nagyobb böngészőben konzisztens.

Van egy beviteli elemem, és folyamatosan ellenőrizni szeretném a tartalom hosszát, és amikor a hossz elér egy bizonyos méretet, engedélyezni szeretném a küldés gombot, de problémába ütköztem a javascript onchange eseménnyel, mivel az esemény csak akkor indul el, ha a bemeneti elem kilép a hatókörből, nem a tartalom megváltozásakor.

Az Onchange nem indul el, ha a név tartalma megváltozik, hanem csak akkor, ha a név életlenné válik.

Lehet valamit tenni annak érdekében, hogy ez az esemény működjön a tartalom megváltoztatása érdekében? vagy valami más esemény, amit használhatok erre? Találtam egy megoldást az onkeyup funkció használatával, de ez nem működik, ha kiválasztunk néhány tartalmat a böngésző automatikus hozzáadásából.

Valamit szeretnék, ami működni tud, ha megváltozik egy mező tartalma, billentyűzet vagy egér... valami ötletetek?

(function () ( var oldVal; $("#név").on("textbemenet módosítása", function () ( var val = this.value; if (érték !== oldVal) ( oldVal = érték; checkLength( val); ) )); )());

Ez elkapja a változást, a gombnyomásokat, a beillesztést, a szövegbevitelt, a bevitelt (ha elérhető). És ne lőj többet a szükségesnél.

A felhasználói ügynöknek el kell küldenie ezt az eseményt, ha egy vagy több karaktert talál. Ezek a karakterek számos forrásból származhatnak, például a billentyűzeten lévő billentyű lenyomásából vagy felengedéséből, a beviteli mód-szerkesztő feldolgozásából vagy a hangutasítás. Ha a "beillesztés" művelet egy egyszerű karaktersorozatot generál, azaz egy szöveges átadást struktúra- vagy stílusinformáció nélkül, akkor ezt az eseménytípust is létre kell hozni.

Blockquote>

Akkor aktiválódik a vezérlőelemekben, amikor a felhasználó módosítja az értéket

Blockquote>

Az onkeyup és az onclick (vagy az onmouseup) kombinációját kell használnia, ha meg akar ragadni bármilyen lehetőséget.

Íme egy másik megoldás, amelyet ugyanarra a problémára fejlesztek. Viszont sok beviteli mezőt használok, ezért a régi értéket maguknak az elemeknek a felhasználó által definiált attribútumaként tárolom: "adat-érték". jQuery használata olyan könnyű kezelni.

$(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("adat-érték", $(this).val()); self.filterBy(this); ) ) ));

itt 5-6 beviteli mezőt használtam, filterBox osztálya van, csak akkor csinálok filterBy metódust, ha az adatérték eltér a saját értékétől.