html <input type = "text" /> evento onchange non funzionante

Sto provando a fare qualche esperimento. Quello che voglio che accada è che ogni volta che l'utente digita qualcosa nella casella di testo, verrà visualizzato in una finestra di dialogo. Ho usato la onchangeproprietà dell'evento per realizzarlo ma non funziona. Devo ancora premere il pulsante di invio per farlo funzionare. Ho letto di AJAX e sto pensando di apprenderlo. Ho ancora bisogno di AJAX per farlo funzionare o è sufficiente JavaScript semplice? Per favore aiuto.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchangeviene attivato solo quando il controllo è sfocato. Prova onkeypressinvece.

Da usare .on('input'...per monitorare ogni modifica a un input (incolla, keyup, ecc.) Da jQuery 1.7 e versioni successive.

Per ingressi statici e dinamici:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Solo per ingressi statici:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle con esempio statico / dinamico: https://jsfiddle.net/op0zqrgy/7/

Il controllo delle sequenze di tasti è solo una soluzione parziale, poiché è possibile modificare il contenuto di un campo di input utilizzando i clic del mouse. Se fai clic con il pulsante destro del mouse in un campo di testo, avrai a disposizione opzioni taglia e incolla che puoi utilizzare per modificare il valore senza premere alcun tasto. Allo stesso modo, se il completamento automatico è abilitato, puoi fare clic con il pulsante sinistro del mouse in un campo e ottenere un menu a discesa del testo inserito in precedenza, e puoi selezionare tra le tue scelte usando un clic del mouse. Il trapping delle sequenze di tasti non rileverà nessuno di questi tipi di modifiche.

Purtroppo, non esiste alcun evento "onchange" che segnala i cambiamenti immediatamente, almeno per quanto ne so. Ma c'è una soluzione che funziona per tutti i casi: imposta un evento di temporizzazione usando setInterval ().

Supponiamo che il tuo campo di immissione abbia un ID e un nome di "città":

<input type="text" name="city" id="city" />

Avere una variabile globale denominata "città":

var city = "";

Aggiungi questo alla tua inizializzazione della pagina:

setInterval(lookForCityChange, 100);

Quindi definire una funzione lookForCityChange ():

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

In questo esempio, il valore di "città" viene verificato ogni 100 millisecondi, che puoi regolare in base alle tue esigenze. Se vuoi, usa una funzione anonima invece di definire lookForCityChange (). Tieni presente che il tuo codice o anche il browser potrebbe fornire un valore iniziale per il campo di input, quindi potresti essere avvisato di una "modifica" prima che l'utente faccia qualsiasi cosa; modificare il codice secondo necessità.

Se l'idea di un evento di temporizzazione che si attiva ogni decimo di secondo sembra sgraziata, puoi avviare il timer quando il campo di input riceve il focus e terminarlo (con clearInterval ()) su una sfocatura. Non credo sia possibile modificare il valore di un campo di input senza che riceva il focus, quindi accendere e spegnere il timer in questo modo dovrebbe essere sicuro.

HTML5 definisce un oninputevento per catturare tutte le modifiche dirette. per me funziona.

onchange si verifica solo quando la modifica all'elemento di input viene confermata dall'utente, il più delle volte questo è quando l'elemento perde il focus.

se vuoi che la tua funzione si attivi ogni volta che il valore dell'elemento cambia dovresti usare l' oninputevento - questo è meglio degli eventi chiave su / giù poiché il valore può essere modificato con il mouse dell'utente, ad esempio incollato o compilato automaticamente ecc.

Maggiori informazioni sull'evento di modifica qui

Maggiori informazioni sull'evento di input qui

usa i seguenti eventi invece di "onchange"

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

In primo luogo, cosa "non funziona"? Non vedi l'avviso?

Inoltre, il tuo codice potrebbe essere semplificato in questo modo

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

Ho riscontrato problemi in cui Safari non attivava eventi "onchange" su un campo di immissione di testo. Ho usato un evento "change" di jQuery 1.7.2 e non ha funzionato neanche. Ho finito per usare l'evento textchange di ZURB. Funziona con mouseevents e può attivarsi senza lasciare il campo:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

Un paio di commenti che IMO sono importanti:

• gli elementi di input non emettono l'evento di "modifica" finché l'azione dell'UTENTE INVIO o la sfocatura non attendono È il comportamento corretto .

• L'evento che desideri utilizzare è "input"(" oninput "). Qui è ben dimostrata la differenza tra i due: https://javascript.info/events-change-input

• I due eventi segnalano due diversi gesti / momenti dell'utente (l'evento "input" significa che l'utente sta scrivendo o navigando nelle opzioni di un elenco di selezione, ma ancora non ha confermato la modifica. "Change" significa che l'utente ha cambiato il valore (con un invio o una sfocatura nostro)

• Ascoltare eventi chiave come molti qui consigliati è una cattiva pratica in questo caso. (come le persone che modificano il comportamento predefinito di ENTER sugli input) ...

• jQuery non ha nulla a che fare con questo. Questo è tutto in standard HTML.

• Se hai problemi a capire PERCHÉ questo è il comportamento corretto, forse è utile, come esperimento, usa il tuo editor di testo o browser senza un mouse / pad, solo una tastiera.

I miei due centesimi.

onkeyup ha funzionato per me. onkeypress non si attiva quando si preme lo spazio indietro.

È meglio usare onchange(event)con <select>. Con <input>puoi utilizzare l'evento seguente:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

provare onpropertychange. funziona solo per IE.