Javascript onchange unos teksta. Onchange JavascripT Ne radi ispravno

_element"> element HTML Odaberite okus sladoleda: Odaberite jedan … Čokolada Sardina Vanilija

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

JavaScript const selectElement = document.querySelector(".sladoled"); selectElement.addEventListener("promjena", (event) => ( const result = document.querySelector(".result"); result.textContent = `Sviđa vam se $(event.target.value)`; )); Rezultat Element unosa teksta

Za neke elemente, uključujući , događaj promjene se ne pokreće sve dok kontrola ne izgubi fokus. Pokušajte unijeti nešto u polje ispod, a zatim kliknite negdje drugdje da pokrenete događaj.

HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("promjena", updateValue); funkcija updateValue(e) ( log.textContent = e.target.value; ) Specifikacije rezultata Status specifikacije

HTML životni standard Definicija "promjene" u toj specifikaciji.	Životni standard

Kompatibilnost preglednika

Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.

Ažurirajte podatke o kompatibilnosti na GitHubu

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome za Android Firefox za Android Opera za Android Safari na iOS-u Samsung Internetonchange

Puna podrška za Chrome Da	Edge Potpuna podrška 12	Firefox Puna podrška Da	IE Puna podrška Da	Opera Potpuna podrška Da	Safari Potpuna podrška Da	WebView Android Puna podrška Da	Chrome Android Puna podrška Da	Firefox Android Puna podrška Da	Opera Android Puna podrška Da	Safari iOS Puna podrška Da	Samsung Internet Android Puna podrška Da

Legenda Puna podrška Puna podrška

Različiti se preglednici ne slažu uvijek treba li se aktivirati događaj promjene za određene vrste interakcija. Na primjer, navigacija tipkovnicom u elementima nikada nije aktivirala događaj promjene u Gecku sve dok korisnik nije pritisnuo Enter ili prebacio fokus s (pogledajte bug 126379). Međutim, od Firefoxa 63 (Quantum), ovo je ponašanje dosljedno u svim glavnim preglednicima.

Događaj "promjene" JavaScripta se pokreće ili nadzire.

• dodana verzija: 1.0.change(handler(eventObject))

  rukovatelj(eventObject)

  Tip: funkcija()

  Funkcija rukovatelja događajima.

• dodana verzija: 1.4.3.change(, handler(eventObject))

  eventData

  Vrsta: Objekt

  Objekt s podacima koji će biti proslijeđeni rukovatelju.

  rukovatelj(eventObject)

  Tip: funkcija()

  Funkcija rukovatelja događajima

• dodana verzija: 1.0.promijeniti()

Ova metoda je skraćenica za .on("promjena", rukovatelj) i .trigger("promjena").

Događaj promjene aktivira se kada se promijene polja obrasca. Prati polja i . Za okvire za odabir, radio gumbe i potvrdne okvire, događaj se aktivira odmah nakon promjene, u drugim slučajevima samo u trenutku kada se korisnik pomakne na drugi element.

Na primjer, imamo sljedeći HTML:

Opcija 1 Opcija 2 Aktiviraj rukovatelj

Rukovatelj događajima može se priložiti ovako:

$(".target").change(function() ( alert("Pozvan rukovatelj za .change()."); ));

Sada, kada promijenimo vrijednost odabranog elementa, vidjet ćemo poruku. Također će se pojaviti ako se druga polja promijene, ali nakon prelaska na druga. Ako element izgubi fokus bez ikakvih promjena, događaj se ne događa. Kako biste sami pokrenuli ovaj događaj, samo pozovite metodu .change() bez argumenata:

$("#other").click(function() ( $(".target").promijeni(); ));

Nakon izvršenja ovog koda, vidjet ćemo poruku iz prethodnog popisa. Ovaj put ćemo ga vidjeti dvaput, jer... Imamo dva elementa u našem obliku.

Primjeri:

Primjer: praćenje promjena u okviru za odabir.

promijeni demo div ( boja: crvena; ) Čokoladni bomboni Taffy Caramel Fudge Cookie $("select") .change(function () ( var str = ""; $("select option:selected").each(function() ( str += $(this).text() + " "; )); $("div").text(str); )).change();

Postavlja rukovatelja za promjenu navedenog elementa obrasca ili pokreće ovaj događaj. Metoda ima tri slučaja upotrebe:

handler(eventObject) - funkcija koja će biti postavljena kao rukovatelj. Kada se pozove, primit će objekt događaja eventObject .

handler(eventObject) - vidi gore.
eventData - dodatni podaci proslijeđeni rukovatelju. Moraju biti predstavljeni objektom u formatu: (fName1:vrijednost1, fName2:vrijednost2, ...) .

Možete ukloniti instalirani rukovatelj pomoću metode unbind().

Sve tri opcije za korištenje metode analogne su drugim metodama (vidi gore), tako da se svi detalji korištenja change() mogu pronaći u opisu ovih metoda.

Podsjetimo se da se događaj promjene ne događa izravno u trenutku promjene, već samo kada promijenjeni element forme izgubi fokus.

Primjer

// postavimo rukovatelja događajem promjene na element s identifikatorom foo $("#foo" ) .change (function () ( upozorenje ("Element foo je promijenjen." ) ; ) ) ; // pozivamo događaj promjene na foo elementu $("#foo" ) .change () ; // instalirajte još jedan rukovatelj događajem promjene, ovaj put za elemente // s blok klasom. Proslijedimo dodatne podatke rukovatelju $(".block" ) .change (( a: 12 , b: "abc" ) , function (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alert (" Element s blokom klase je promijenjen. " + " Sljedeći podaci proslijeđeni su rukovatelju ovog događaja: " + externalData ) ; ) ) ;

Pojavljuje se odmah nakon promjene vrijednosti elementa, a događaj onchange događa se kada element izgubi fokus. Još jedna razlika je u tome što događaj onchange ima širu podršku preglednika i radi s elementima kao što je , te je prošireniji s .

Podrška za preglednik Atribut događaja
Opera
IExplorer
Rub

onchange	Da	Da	Da	Da	Da	Da

Primjer upotrebe sintakse

Primjer prikaza teksta upisanog u element kada se fokus promijeni, korištenjem atributa događaja onchange. Imajte na umu da bi se, da smo koristili atribut događaja oninput, tekst odmah prikazao, a ne kada bi se fokus promijenio.

onchange događaj

Upišite bilo koji tekst i uklonite fokus s elementa:

funkcija testFunction() ( var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "Upisali ste sljedeći tekst: " + x; )

Upišite bilo koji tekst i uklonite fokus s elementa:

Primjer ispisa vrijednosti oznake (stavka padajućeg popisa) pomoću atributa događaja onchange.

onchange događaj

Odaberite želju s popisa:

Želja 1 Želja 2 Želja 3

funkcija wishFunction() ( var z = document.getElementById("wishlist" ).value; document.getElementById("info" ).innerHTML = "Odabrali ste: " + z; )

Odaberite želju s popisa:

Želja 1 Želja 2 Želja 3

Pogledajmo primjer promjene 2D rotacije elementa pomoću svojstva CSS transformacije, atributa događaja HTML onchange i JavaScript funkcije:

Dvodimenzionalna rotacija elementa u CSS #test ( širina : 100px ; /* postavljanje širine bloka */ visina : 100px ; /* postavljanje visine bloka */ margina : 20px ; /* postavljanje količine margina za sve strane elementa */ obrub : 1px puna narančasta ; /* postavite čvrsti 1px narančasti obrub */ pozadina : kaki ; /* postavite boju pozadine */ transformacija : rotiraj (0deg) ; /* postavite da nema 2D rotacija */ -webkit-transform : rotate(0deg ) ; -ms-transform : rotate(0deg) ; /* za podršku ranijim verzijama preglednika */ ) funkcija rotate(value) ( ​​/* kreirajte funkciju za promjenu vrijednost stila elementa s id = test, prikazivanje rezultata promjene u elementu s id = rezultat i podrška za starije verzije preglednika */ document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg)" ; document.getElementById("test" ).style.msTransform = "rotate( " + value + "deg)" ; /* podrška za starije verzije preglednika */ document.getElementById("test" ). style.MozTransform = "rotate(" + value + "deg)" ; /* podrška za starije verzije preglednika */ document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("result" ).innerHTML = value + "deg" ; )

Pomaknite klizač za rotiranje elementa:

transformacija: rotacija(0deg); Okreni me