Rileva casella di testo di input modificata

Ho esaminato numerose altre domande e ho trovato risposte molto semplici, incluso il codice qui sotto. Voglio semplicemente rilevare quando qualcuno modifica il contenuto di una casella di testo ma per qualche ragione non funziona ... Non ricevo errori di console. Quando imposto un punto di interruzione nel browser con la change()funzione non lo colpisce mai.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">

È possibile utilizzare l' inputevento Javascript in jQuery in questo modo:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

In puro JavaScript:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

O così:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

prova keyup invece di cambiare.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

Ecco la documentazione ufficiale di jQuery per .keyup () .

Ad ogni risposta mancano alcuni punti, quindi ecco la mia soluzione:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

I Input Eventfuochi su input da tastiera , trascinamento del mouse , riempimento automatico e copia-incolla testati su Chrome e Firefox. Il controllo del valore precedente consente di rilevare cambiamenti reali, il che significa che non si attiva quando si incolla la stessa cosa o si digita lo stesso carattere o ecc.

Esempio di lavoro: http://jsfiddle.net/g6pcp/473/

aggiornare:

E se ti piace eseguire il tuo change function solo quando l'utente termina di digitare e impedire di attivare più volte l'azione di modifica, puoi provare questo:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

Se l'utente inizia a digitare (ad es. "Foobar") questo codice impedisce l' change actionesecuzione per ogni tipo di lettera dell'utente e viene eseguito solo quando l'utente smette di digitare, questo è utile specialmente quando si invia l'input al server (ad es. Input di ricerca), che server di modo fa una sola ricerca foobare non sei ricerche per fe poi foe poi fooe foobe così via.

Gli input di testo non generano l' changeevento fino a quando non perdono lo stato attivo. Fare clic all'esterno dell'input e verrà visualizzato l'avviso.

Se la richiamata deve attivarsi prima che l'input di testo venga disattivato, utilizzare l' .keyup()evento.

onkeyup, onpaste, onchange, oninputsembra non riuscire quando il browser esegue il riempimento automatico nelle caselle di testo. Per gestire un caso del genere, includi " autocomplete='off'" nel campo di testo per impedire al browser di riempire automaticamente la casella di testo,

Per esempio,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

Nel mio caso, avevo una casella di testo allegata a un datepicker. L'unica soluzione che ha funzionato per me è stata gestirla all'interno dell'evento onSelect del datepicker.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

Penso che puoi usare keydownanche tu :

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

LAVORANDO:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});