Javascript per modificare l'input di testo. Onchange JavascriptT Non funziona correttamente

_elemento"> elemento

HTML

Scegli un gusto di gelato: Seleziona uno... Cioccolato Sardina vaniglia

Corpo ( display: griglia; aree modello griglia: "seleziona risultato"; ) select ( area griglia: seleziona; ) .risultato ( area griglia: risultato; )

JavaScript

const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => ( const result = document.querySelector(".result"); result.textContent = `Ti piace $(event.target.value)`; ));

risultato

elemento di immissione del testo

Per alcuni elementi, tra cui , l'evento di modifica non viene attivato finché il controllo non perde lo stato attivo. Prova a inserire qualcosa nel campo sottostante, quindi fai clic in un altro punto per attivare l'evento.

HTML

JavaScript

const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("cambia", updateValue); funzione updateValue(e) ( log.textContent = e.target.value; )

risultato

Specifiche

Specifica	Stato
Standard di vita HTML La definizione di "cambiamento" in quella specifica.	Standard di vita

Compatibilità del browser

La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, controlla https://github.com/mdn/browser-compat-data e inviaci una richiesta pull.

Aggiorna i dati di compatibilità su GitHub

	Desktop						Mobile
	Cromo	bordo	Firefox	Internet Explorer	musica lirica	safari	visualizzazione web Android	Chrome per Android	Firefox per Android	Opera per Android	Safari su iOS	Samsung Internet
modificare	Supporto completo per Chrome Sì	Edge Pieno supporto 12	Supporto completo per FirefoxSì	IE Pieno supporto Sì	Opera Supporto completoSì	Safari Pieno supporto Sì	WebView Android Pieno supporto Sì	Chrome Android Pieno supporto Sì	Firefox Android Pieno supporto Sì	Opera Android Pieno supporto Sì	Safari iOS Pieno supporto Sì	Samsung Internet Android Pieno supporto Sì

Leggenda

Supporto totale Supporto totale

I diversi browser non sono sempre d'accordo sull'attivazione di un evento di modifica per determinati tipi di interazione. Ad esempio, la navigazione da tastiera nell'elemento rappresenta un controllo che fornisce un menu di opzioni"> gli elementi non hanno mai attivato un evento di modifica in Gecko fino a quando l'utente non ha premuto Invio o spostato lo stato attivo da (vedi bug 126379). Tuttavia, a partire da Firefox 63 (Quantum), questo comportamento è coerente tra tutti i principali browser.

L'evento JavaScript "change" (evento di modifica del modulo) viene chiamato o monitorato.

• versione aggiunta: 1.0.change(handler(eventObject))

  gestore (oggetto evento)

  Tipo: Funzione()

  Funzione di gestione degli eventi.

• versione aggiunta: 1.4.3.change(, handler(eventObject))

  eventData

  Tipo: Oggetto

  Un oggetto con dati da passare al gestore.

  gestore (oggetto evento)

  Tipo: Funzione()

  Funzione di gestione degli eventi

• versione aggiunta: 1.0.modificare()

Questo metodo è l'abbreviazione di .on("change", handler) e .trigger("change").

L'evento di modifica viene generato quando i campi del modulo cambiano. Tiene traccia dei campi , e <select>. Per le caselle di selezione, i pulsanti di opzione e le caselle di controllo, l'evento viene attivato immediatamente dopo la modifica, negli altri casi, solo nel momento in cui l'utente passa a un altro elemento.</p> <p>Ad esempio, abbiamo il seguente HTML:</p> <p> <form> <input class="target" type="text" value="Campo 1"> <select class="target"> <option value="opzione 1" selected="selected">opzione 1</option> <option value="opzione 2">opzione 2</option> </select> </form> <div id="other">Attiva il gestore</div></p> <p>Un gestore di eventi può essere allegato in questo modo:</p> <p>$(".target").change(function() ( alert("Gestione per .change() chiamato."); ));</p> <p>Ora, quando si modifica il valore dell'elemento select, vedremo un messaggio. Si verificherà anche se altri campi vengono modificati, ma dopo il passaggio ad altri. Se l'elemento perde lo stato attivo e non sono state apportate modifiche, l'evento non viene attivato. Per attivare tu stesso questo evento, è sufficiente chiamare il metodo .change() senza argomenti:</p> <p>$("#altro").click(function() ( $(".target").change(); ));</p> <p>Dopo aver eseguito questo codice, vedremo il messaggio dell'elenco precedente. Questa volta lo vedremo due volte, perché. Abbiamo due elementi nella forma.</p> <h2>Esempi:</h2> <p><b>Esempio</b>: tiene traccia delle modifiche alla casella di selezione.</p> <p> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>cambia demo</title> <style> div { color: red; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <select name="sweets" multiple="multiple"> <option>Cioccolato</option> <option selected="selected">Caramella</option> <option>Taffy</option> <option selected="selected">Caramello</option> <option>Truffa</option> <option>biscotto</option> </select> <div></div> <script> $("select") .change(function () { var str = ""; $("select option:selected").each(function() { str += $(this).text() + " "; }); $("div").text(str); }) .change(); </script> </body> </html></p> <p>Imposta un gestore di modifiche per l'elemento del modulo specificato o attiva questo evento. Il metodo ha tre casi d'uso:</p> <p><b>gestore (oggetto evento)</b>— una funzione che verrà impostata come gestore. Quando viene chiamato, riceverà un oggetto evento <i>eventObject</i> .</p> <p><b>gestore (oggetto evento)</b>- vedi sopra. <br><b>eventData</b>— dati aggiuntivi trasmessi all'handler. Devono essere rappresentati da un oggetto nel formato: (fName1:value1, fName2:value2, ...) .</p> <p>È possibile rimuovere il gestore installato utilizzando il metodo unbind().</p> <p>Tutte e tre le opzioni per l'utilizzo del metodo sono analoghe ad altri metodi (vedi sopra), quindi tutti i dettagli sull'utilizzo di change() possono essere trovati nella descrizione di questi metodi.</p> <p>Ricordiamo che l'evento di modifica non si verifica direttamente al momento della modifica, ma solo quando si perde il focus dell'elemento del modulo modificato.</p> <h2>Esempio</h2> <p>// imposta il gestore dell'evento di modifica sull'elemento con id foo</span>$("#pippo" ) .change (funzione () ( avviso ( <span>"L'elemento foo è stato cambiato."</span>) ; } ) ; <span>// chiama l'evento change sull'elemento foo</span>$("#pippo" ).cambia(); <span>// imposta un altro gestore di eventi di modifica, questa volta sugli elementi</span> <span>// con blocco di classe. Passare dati aggiuntivi al gestore</span>$(".block" ) .change (( a: 12 , b: "abc" ) , funzione (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; avviso ( <span>"Un elemento con blocco di classe è stato modificato."</span>+ <span>"Dati passati a questo gestore eventi: "</span>+ dati esterni); ) ) ;</p> <p>Si verifica immediatamente dopo la modifica del valore dell'elemento e l'evento onchange si verifica quando l'elemento perde lo stato attivo. Un'altra differenza è che l'evento onchange ha un supporto più ampio del browser e funziona su elementi come <keygen> , <select>e più esteso con elemento <input> .</p> <h2>Supporto del browser</h2> <table class="tableTag"><tr><th class="tw">Attributo dell'evento</th><th></th><th></th><th><br>musica lirica</th><th></th><th><br>Esploratore</th><th><br>bordo</th> </tr><tr><td>modificare</td><td class="tyes">sì</td><td class="tyes">sì</td><td class="tyes">sì</td><td class="tyes">sì</td><td class="tyes">sì</td><td class="tyes">sì</td> </tr></table><h2>Sintassi</h2> <element <span>onchange="script"></span> <h2>Esempio di utilizzo</h2> <p>Un esempio di visualizzazione del testo digitato in un elemento <input>sul cambiamento del focus utilizzando l'attributo dell'evento onchange. Nota che se avessimo utilizzato l'attributo evento oninput, il testo sarebbe stato visualizzato immediatamente invece di quando il focus è cambiato.</p> <!DOCTYPE html> <html> <head> <title>evento di cambio</title> </head> <body> <p>Digita del testo e rimuovi lo stato attivo dall'elemento:</p> <input type = "text" name = "testInput" id = "testInput" onchange = "testFunction()" > <p id = "info2" ></p> <script> function testFunction() { var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = <span>"Вы набрали следующий текст: " </span> + x; } </script> </body> </html> <p>Digita del testo e rimuovi lo stato attivo dall'elemento:</p> <input type="text" name="testInput" id="testInput" onchange="testFunction()"><p>Un esempio di visualizzazione del valore del tag <option>(elemento dell'elenco a discesa) utilizzando l'attributo dell'evento onchange.</p> <!DOCTYPE html> <html> <head> <title>evento di cambio</title> </head> <body> <p>Scegli un desiderio dalla lista:</p> <select id = "wishlist" onchange = "wishFunction()" > <option value = "Desiderio 1" >Desiderio 1 <option value = "Desiderio 2" >Desiderio 2 <option value = "Desiderio 3" >Desiderio 3</select> <p id = "info" ></p> <script> function wishFunction() { var z = document.getElementById("wishlist" ).value; document.getElementById("info" ).innerHTML = "Вы выбрали: " + z; } </script> </body> </html> <p>Scegli un desiderio dalla lista:</p><p>Desiderio 1 Desiderio 2 Desiderio 3</p><p>Diamo un'occhiata a un esempio di modifica della rotazione 2D di un elemento utilizzando la proprietà CSS transform, l'attributo dell'evento onchange HTML e una funzione JavaScript:</p> <!DOCTYPE html> <html> <head> <title>Rotazione 2D di un elemento in CSS</title> <style> <b>#test </b> { width : 100px ; <span>/* устанавливаем ширину блока */ </span> height : 100px ; <span>/* устанавливаем высоту блока */ </span> margin : 20px ; <span>/* устанавливаем величину внешнего отступа для всех сторон элемента */ </span> border : 1px solid orange ; <span>/* устанавливаем сплошную границу размером 1px оранжевого цвета */ </span> background : khaki ; <span> /* устанавливаем цвет заднего фона */ </span> transform : rotate(0deg) ; <span>/* устанавливаем, что двухмерный поворот отсутствует */ </span> -webkit-transform : rotate(0deg) ; -ms-transform : rotate(0deg) ; <span> /* для поддержки ранних версий браузеров */ </span> } </style> <script> function rotate(value) { <span> /* создаем функцию для изменения значения стиля элемента с id = test, с отображением результата изменения в элементе с id = result и поддержкой ранних версий браузера */ </span> document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg)" ; document.getElementById("test" ).style.msTransform = "rotate(" + value + "deg)" ;<span> /* поддержка ранних версий браузера */ </span> document.getElementById("test" ).style.MozTransform = "rotate(" + value + "deg)" ;<span> /* поддержка ранних версий браузера */ </span> document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("result" ).innerHTML = value + "deg" ; } </script> </head> <body> <p>Sposta il cursore per ruotare l'elemento:</p> <input type = "range" min = "-360" max = "360" value = "0" onchange = "rotate(this.value)" >trasformare: ruotare( <span id = "result" >0 gradi</span>); <div id = "test" >Ruotami <div> </body> </html> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Articoli correlati in alto</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/it/kak-naiti-telefon-na-android-esli-on-poteryalsya-ili-ukraden-kak-vernut.html"> <div class="img_container"><img src="/uploads/d3d163306febb9f32f0020a33c8b9cdb.jpg" border="0" alt="Come restituire uno smartphone smarrito o rubato Come ritrovare un telefono smarrito rubato" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Come restituire uno smartphone smarrito o rubato Come ritrovare un telefono smarrito rubato</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/it/skolko-idet-zakaznoe-pismo-po-skolko-idet-posylka-s.html"> <div class="img_container"><img src="/uploads/29a4c0919028ff27bfa8cdfefa001987.jpg" border="0" alt="Quanto costa un pacco con Aliexpress?" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Quanto costa un pacco con Aliexpress?</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/it/kogda-izobreli-lampochku-v-kakom-veke-kto-pervym-pridumal.html"> <div class="img_container"><img src="/uploads/c5927ebfb088c080c6632cfc7c7bf5de.jpg" border="0" alt="Chi per primo ha inventato la lampadina a incandescenza" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Chi per primo ha inventato la lampadina a incandescenza</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Categorie:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/it/category/programs/">Programmi</a></li> <li class=""><a href="https://bumotors.ru/it/category/safety/">Sicurezza</a></li> <li class=""><a href="https://bumotors.ru/it/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/it/category/iron/">Ferro da stiro</a></li> <li class=""><a href="https://bumotors.ru/it/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/it/category/vkontakte/">In contatto con</a></li> <li class=""><a href="https://bumotors.ru/it/category/errors/">Errori</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="https://vk.com/share.php?url=https://bumotors.ru/javascript-onchange-tekstovyi-input-onchange-javascript-ne-rabotaet-dolzhnym-obrazom.html" class="vk social-ico"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/javascript-onchange-tekstovyi-input-onchange-javascript-ne-rabotaet-dolzhnym-obrazom.html" class="fb social-ico"></a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Fit%2Fjavascript-onchange-tekstovyi-input-onchange-javascript-ne-rabotaet-dolzhnym-obrazom.html" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2022 bumotors.ru. Come configurare smartphone e PC. Portale informativo.</span> </div> </div> </div> </div> </body> </html>