Domanda JQuery può controllare se il contenuto di input è cambiato?


È possibile associare l'evento javascript (jQuery è il migliore) a "cambiare" in qualche modo il valore di input?

Lo so .change() metodo, ma non si attiva fino a quando (il cursore) non si lascia il campo di input. Ho anche considerato l'utilizzo .keyup() metodo ma reagisce anche sui tasti freccia e così via.

Ho bisogno solo di innescare un'azione ogni volta il testo nell'input cambia, anche se è solo una modifica di una lettera.


44
2017-09-23 21:09


origine


risposte:


C'è una soluzione semplice, che è l'HTML5 input evento. È supportato nelle versioni correnti di tutti i principali browser per <input type="text"> elementi e c'è una soluzione semplice per IE <9. Vedi le seguenti risposte per maggiori dettagli:

Esempio (tranne IE <9: vedere i collegamenti sopra per soluzione alternativa):

$("#your_id").on("input", function() {
    alert("Change to " + this.value);
});

70
2017-09-24 00:25



Sì, confrontalo con il valore che aveva prima che cambiasse.

var previousValue = $("#elm").val();
$("#elm").keyup(function(e) {
    var currentValue = $(this).val();
    if(currentValue != previousValue) {
         previousValue = currentValue;
         alert("Value changed!");
    }
});

Un'altra opzione è attivare la funzione modificata solo su determinati tasti. Uso e.KeyCode per capire quale tasto è stato premuto.


12
2017-09-23 21:13



   function checkChange($this){
    var value = $this.val();      
    var sv=$this.data("stored");            
        if(value!=sv)
          $this.trigger("simpleChange");    
    }

$(document).ready(function(){
$(this).data("stored",$(this).val());   
    $("input").bind("keyup",function(e){  
    checkChange($(this));
});        
$("input").bind("simpleChange",function(e){
    alert("the value is chaneged");
    });        
});

ecco il violino http://jsfiddle.net/Q9PqT/1/


7
2017-09-23 21:40



È inoltre possibile memorizzare il valore iniziale in un attributo dati e verificarlo con il valore corrente.

<input type="text" name="somename" id="id_someid" value="" data-initial="your initial value" /> 

$("#id_someid").keyup(function() {
    return $(this).val() == $(this).data().initial;
});

Restituisce true se il valore iniziale non è cambiato.


5
2018-05-21 11:48



Puoi utilizzare l'uso dei dati in jQuery e catturare tutti gli eventi che poi testano l'ultimo valore (non verificato):

$(document).ready(function() {  
    $("#fieldId").bind("keyup keydown keypress change blur", function() {
        if ($(this).val() != jQuery.data(this, "lastvalue") {
         alert("changed");
        }
        jQuery.data(this, "lastvalue", $(this).val());
    });
});

Ciò funzionerebbe abbastanza bene anche su una lunga lista di articoli. utilizzando jQuery.data significa che non devi creare una variabile javascript per tracciare il valore. Potresti farlo $("#fieldId1, #fieldId2, #fieldId3, #fieldId14, etc") per tenere traccia di molti campi.

AGGIORNAMENTO: aggiunto blur al bind elenco.


2
2017-09-23 21:31



Ho dovuto usare questo tipo di codice per uno scanner che incollava le cose sul campo

$(document).ready(function() {
  var tId,oldVal;
  $("#fieldId").focus(function() {
     oldVal = $("#fieldId").val();
     tId=setInterval(function() { 
      var newVal = $("#fieldId").val(); 
      if (oldVal!=newVal) oldVal=newVal;
      someaction() },100);
  });
  $("#fieldId").blur(function(){ clearInterval(tId)});
});

Non testato...


1
2017-09-23 21:20



Non penso che esista una soluzione 'semplice'. Probabilmente dovrai utilizzare entrambi gli eventi onKeyUp e onChange, in modo tale da catturarli anche quando vengono apportate modifiche con il mouse. Ogni volta che il tuo codice viene chiamato, puoi memorizzare il valore che hai "visto" su questo valore. Questo dovrebbe rendere un po 'più facile.


1
2017-09-23 21:28



È possibile impostare eventi su una combinazione di eventi di tasti e mouse e onblur, per essere sicuri. In tal caso, memorizzare il valore dell'input. Nella prossima chiamata, confronta il valore corrente con il valore memorizzato per ultimo. Fai la tua magia solo se è effettivamente cambiata.

Per farlo in un modo più o meno pulito:

È possibile associare i dati a un elemento DOM (ricerca api.jquery.com/jQuery.data) In questo modo è possibile scrivere un insieme generico di gestori di eventi assegnati a tutti gli elementi nel modulo. Ogni evento può passare l'elemento che è stato attivato da una funzione generica. Quella una funzione può aggiungere il vecchio valore ai dati dell'elemento. In questo modo, dovresti essere in grado di implementarlo come un pezzo generico di codice che funziona sull'intera forma e su ogni modulo che scriverai d'ora in poi. :) E probabilmente non prenderà più di circa 20 righe di codice, immagino.

Un esempio è in questo violino: http://jsfiddle.net/zeEwX/


1
2017-09-23 21:12



Dal momento che l'utente può accedere al menu OS e selezionare Incolla usando il mouse, non c'è nessun evento sicuro che lo farà scattare per te. L'unico modo in cui ho trovato che funziona sempre è avere un setInterval che controlli se il valore di input è cambiato:

var inp = $('#input'),
    val = saved = inp.val(),
    tid = setInterval(function() {
        val = inp.val();
        if ( saved != val ) {
            console.log('#input has changed');
            saved = val;
    },50);

Puoi anche impostarlo usando un evento speciale jQuery.


0
2017-09-24 06:59