Rileva tutte le modifiche a <input type = "text"> (immediatamente) usando JQuery

Esistono molti modi in cui il valore di a <input type="text">può cambiare, tra cui:

• pressione dei tasti
• copia incolla
• modificato con JavaScript
• completato automaticamente dal browser o da una barra degli strumenti

Voglio che la mia funzione JavaScript venga chiamata (con il valore di input corrente) ogni volta che cambia. E voglio che venga chiamato immediatamente, non solo quando l'ingresso perde la messa a fuoco.

Sto cercando il modo più pulito e robusto per farlo su tutti i browser (preferibilmente usando jQuery).

Questo codice jQuery rileva le modifiche immediate a qualsiasi elemento e dovrebbe funzionare su tutti i browser:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

Una soluzione di fantasia in tempo reale per jQuery> = 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

se vuoi rilevare anche un evento "click", basta:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

se stai usando jQuery <= 1.4, usa liveinvece di on.

Sfortunatamente, penso che setIntervalvince il premio:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

È la soluzione più pulita, con solo 1 riga di codice. È anche il più robusto, poiché non devi preoccuparti di tutti i diversi eventi / modi in cui inputpuoi ottenere un valore.

Gli svantaggi dell'utilizzo di 'setInterval' non sembrano applicarsi in questo caso:

• La latenza di 100 ms? Per molte applicazioni, 100 ms è abbastanza veloce.
• Aggiunto carico sul browser? In generale, l'aggiunta di un sacco di set pesanti Intervalli sulla tua pagina non è buona. Ma in questo caso particolare, il caricamento della pagina aggiunta non è rilevabile.
• Non si adatta a molti input? La maggior parte delle pagine non ha più di una manciata di input, che puoi annusare tutti nello stesso setInterval.

Associare oninputall'evento sembra funzionare bene nella maggior parte dei browser sani di mente. Anche IE9 lo supporta, ma l'implementazione è errata (l'evento non viene generato durante l'eliminazione dei caratteri).

Con jQuery versione 1.7+ il onmetodo è utile per associare l'evento in questo modo:

$(".inputElement").on("input", null, null, callbackFunction);

Risposta 2017 : l' evento di input fa esattamente questo per qualcosa di più recente di IE8.

$(el).on('input', callback)

Sfortunatamente non esiste alcun evento o insieme di eventi che corrisponda ai tuoi criteri. Keypress e copia / incolla possono entrambi essere gestiti con l' keyupevento. Le modifiche tramite JS sono più complicate. Se hai il controllo del codice che imposta la casella di testo, la soluzione migliore è modificarla per chiamare direttamente la tua funzione o attivare un evento utente nella casella di testo:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

Se non hai il controllo su quel codice, puoi usare setInterval()'guarda' la casella di testo per le modifiche:

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

Questo tipo di monitoraggio attivo non rileverà gli aggiornamenti "immediatamente", ma sembra essere abbastanza veloce da non avere ritardi percettibili. Come ha sottolineato DrLouie nei commenti, questa soluzione probabilmente non si ridimensiona bene se devi guardare molti input. È sempre possibile regolare il secondo parametro su setInterval()per controllare più o meno frequentemente.

Ecco una soluzione leggermente diversa se non hai voglia di nessuna delle altre risposte:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

Considera che non puoi fare affidamento su clic e keyup per acquisire il menu contestuale incolla.

Aggiungi questo codice da qualche parte, questo farà il trucco.

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

Questa soluzione trovata su val () non attiva change () in jQuery

Ho creato un campione. Possa funzionerà per te.

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

In realtà non è necessario configurare i loop per rilevare le modifiche javaScript. Abbiamo già impostato molti listener di eventi per l'elemento che vogliamo rilevare. solo innescando qualsiasi evento non dannoso renderà il lavoro.

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

e spesso questo è disponibile solo se hai il pieno controllo delle modifiche javascript sul tuo progetto.

Bene, il modo migliore è quello di coprire quelle tre basi che hai elencato da solo. Un semplice: onblur,: onkeyup, ecc. Non funzionerà per quello che vuoi, quindi basta combinarli.

KeyUp dovrebbe coprire i primi due, e se Javascript sta modificando la casella di input, spero che sia il tuo javascript, quindi aggiungi un callback nella funzione che lo modifica.

Ecco un esempio funzionante che sto usando per implementare una variazione di completamento automatico popola un selettore jqueryui (elenco), ma non voglio che funzioni esattamente come il completamento automatico jqueryui che fa un menu a discesa.

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

NO JQUERY! (È un po 'obsoleto in questi giorni comunque)

Modifica: ho rimosso gli eventi HTML. NON utilizzare eventi HTML ... utilizzare invece i listener di eventi Javascript.

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
 var a = document.getElementById('output');
 var b = /^[ -~]+$/;
 if (e.target.value == '' || b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. Yes";
 } else if (!b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. No";
 }
}

Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input id="testInput">
<br>
<a id="output">Text is Ascii?.. Yes</a>

Non puoi semplicemente usare l' <span contenteditable="true" spellcheck="false">elemento al posto di <input type="text">?

<span>(con contenteditable="true" spellcheck="false"come attributi) si distingue <input>principalmente perché:

• Non è in stile <input>.
• Non ha una valueproprietà, ma il testo è reso come innerTexte fa parte del suo corpo interno.
• È multilinea mentre <input>non lo è anche se si imposta l'attributo multiline="true".

Per ottenere l'aspetto puoi, ovviamente, modellarlo in CSS, mentre scrivendo il valore come innerTextpuoi ottenere per esso un evento:

Ecco un violino .

Sfortunatamente c'è qualcosa che in realtà non funziona in IE e Edge, che non riesco a trovare.

Sebbene questa domanda sia stata pubblicata 10 anni fa, credo che abbia ancora bisogno di alcuni miglioramenti. Quindi ecco la mia soluzione.

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

L'unico problema con questa soluzione è che non si innescherà se il valore cambia da javascript come $('selector').val('some value'). Puoi attivare qualsiasi evento nel tuo selettore quando cambi il valore da javascript.

$(selector).val('some value');
// fire event
$(selector).trigger('change');

puoi vedere questo esempio e scegliere quali sono gli eventi che ti interessano:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>

Potrei essere in ritardo alla festa qui, ma non puoi semplicemente usare l'evento .change () fornito da jQuery.

Dovresti essere in grado di fare qualcosa come ...

$(#CONTROLID).change(function(){
    do your stuff here ...
});

Puoi sempre associarlo a un elenco di controlli con qualcosa come ...

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

Il raccoglitore live garantisce che tutti gli elementi esistenti nella pagina adesso e in futuro vengano gestiti.

Questo è il modo più veloce e pulito per farlo:

Sto usando Jquery ->

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

Funziona abbastanza bene per me.