Come rilevare il contenuto di una casella di testo è cambiato

Voglio rilevare ogni volta che il contenuto di una casella di testo è cambiato. Posso usare il metodo keyup, ma questo rileverà anche i tasti che non generano lettere, come i tasti freccia. Ho pensato a due metodi per farlo usando l’evento keyup:

  1. Controllare esplicitamente se il codice ASCII del tasto premuto è una lettera \ backspace \ delete
  2. Usa chiusure per ricordare quale era il testo nella casella di testo prima del tratto chiave e controlla se questo è cambiato.

Entrambi sembrano piuttosto ingombranti.

Inizia a osservare l’evento ‘input’ invece di ‘cambia’.

 jQuery('#some_text_box').on('input', function() { // do your stuff }); 

… che è bello e pulito, ma può essere esteso ulteriormente a:

 jQuery('#some_text_box').on('input propertychange paste', function() { // do your stuff }); 

Utilizzare l’evento onchange in HTML / JavaScript standard.

In jQuery è l’evento change () . Per esempio:

$('element').change(function() { // do something } );

MODIFICARE

Dopo aver letto alcuni commenti, che dire di:

 $(function() { var content = $('#myContent').val(); $('#myContent').keyup(function() { if ($('#myContent').val() != content) { content = $('#myContent').val(); alert('Content has been changed'); } }); }); 

L’evento ‘change’ non funziona correttamente, ma l”input’ è perfetto.

 $('#your_textbox').bind('input', function() { /* This will be fired every time, when textbox's value changes. */ } ); 

Cosa ne pensi di questo:

 $("#input").bind("propertychange change keyup paste input", function(){ // do stuff; }); 

> jQuery 1.7

 $("#input").on("propertychange change keyup paste input", function(){ // do stuff; }); 

Funziona in IE8 / IE9, FF, Chrome

Usa chiusure per ricordare quale era il testo nella casella di controllo prima del tratto chiave e controlla se questo è cambiato.

Sì. Non è necessario utilizzare le chiusure necessariamente, ma è necessario ricordare il vecchio valore e confrontarlo con il nuovo.

Però! Questo ancora non catturerà ogni cambiamento, perché esiste un modo per modificare il contenuto della casella di testo che non coinvolge alcun tasto premuto. Ad esempio selezionando un intervallo di testo e poi facendo clic con il pulsante destro del mouse. O trascinandolo. O rilasciare il testo da un’altra app nella casella di testo. O cambiando una parola tramite il controllo ortografico del browser. O…

Quindi, se è necessario rilevare ogni modifica, è necessario eseguire il sondaggio. È ansible window.setInterval per controllare il campo rispetto al suo valore precedente ogni (say) secondo. È anche ansible colbind onkeyup alla stessa funzione in modo che le modifiche causate dai tasti vengano riflesse più rapidamente.

Ingombrante? Sì. Ma è così o semplicemente fai il normale modo di onchange HTML e non provare ad aggiornare istantaneamente.

 $(document).on('input','#mytxtBox',function () { console.log($('#mytxtBox').val()); }); 

È ansible utilizzare l’evento ‘input’ per rilevare la modifica del contenuto nella casella di testo. Non utilizzare ‘live’ per associare l’evento in quanto è deprecato in Jquery-1.7, quindi utilizzare ‘on’.

Suppongo che tu stia cercando di fare qualcosa di interattivo quando la casella di testo cambia (es. Recuperare alcuni dati via ajax). Stavo cercando questa stessa funzionalità. So che usare una soluzione globale non è la soluzione più robusta o elegante, ma è quello con cui sono andato. Ecco un esempio:

 var searchValue = $('#Search').val(); $(function () { setTimeout(checkSearchChanged, 0.1); }); function checkSearchChanged() { var currentValue = $('#Search').val(); if ((currentValue) && currentValue != searchValue && currentValue != '') { searchValue = $('#Search').val(); $('#submit').click(); } else { setTimeout(checkSearchChanged, 0.1); } } 

Una cosa fondamentale da notare qui è che sto usando setTimeout e non setInterval dal momento che non desidero inviare più richieste allo stesso tempo. Ciò garantisce che il timer “si arresti” quando il modulo viene inviato e “inizia” quando la richiesta è completa. Lo faccio chiamando checkSearchChanged al termine della mia chiamata ajax. Ovviamente potresti espandere questo per verificare la lunghezza minima, ecc.

Nel mio caso, sto usando ASP.Net MVC in modo da poter vedere come legarlo con MVC Ajax nel seguente post:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

Consiglierei di dare un’occhiata al widget di completamento automatico dell’interfaccia utente di jQuery. Hanno gestito la maggior parte dei casi lì dal momento che il loro codice base è più maturo di molti altri là fuori.

Di seguito è riportato un collegamento a una pagina demo in modo da poter verificare che funzioni. http://jqueryui.com/demos/autocomplete/#default

Otterrete il massimo beneficio leggendo la fonte e vedendo come l’hanno risolta. Puoi trovarlo qui: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

Fondamentalmente fanno tutto, si legano input, keydown, keyup, keypress, focus and blur . Quindi hanno una gestione speciale per tutti i tipi di chiavi come page up, page down, up arrow key and down arrow key . Un timer viene utilizzato prima di ottenere il contenuto della casella di testo. Quando un utente digita una chiave che non corrisponde a un comando (tasto su, tasto giù e così via) c’è un timer che esplora il contenuto dopo circa 300 millisecondi. Sembra questo nel codice:

 // switch statement in the switch( event.keyCode ) { //... case keyCode.ENTER: case keyCode.NUMPAD_ENTER: // when menu is open and has focus if ( this.menu.active ) { // #6055 - Opera still allows the keypress to occur // which causes forms to submit suppressKeyPress = true; event.preventDefault(); this.menu.select( event ); } break; default: suppressKeyPressRepeat = true; // search timeout should be triggered before the input value is changed this._searchTimeout( event ); break; } // ... // ... _searchTimeout: function( event ) { clearTimeout( this.searching ); this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call * // only search if the value has changed if ( this.term !== this._value() ) { // * _value is a wrapper to get the value * this.selectedItem = null; this.search( null, event ); } }, this.options.delay ); }, 

La ragione per usare un timer è che l’UI abbia la possibilità di essere aggiornata. Quando Javascript è in esecuzione, l’interfaccia utente non può essere aggiornata, quindi la chiamata alla funzione di ritardo. Questo funziona bene per altre situazioni come mantenere l’attenzione sulla casella di testo (usata da quel codice).

Quindi puoi usare il widget o copiare il codice nel tuo widget se non stai usando l’interfaccia utente di jQuery (o nel mio caso lo sviluppo di un widget personalizzato).

Vorrei chiedere perché stai cercando di rilevare quando il contenuto della casella di testo è cambiato in tempo reale ?

Un’alternativa sarebbe quella di impostare un timer (tramite setIntval?) E confrontare l’ultimo valore salvato con quello corrente e quindi resettare un timer. Ciò garantirebbe la possibilità di rilevare QUALSIASI modifica, indipendentemente dal fatto che sia stata causata da tasti, mouse, qualche altro dispositivo di input che non è stato preso in considerazione o anche JavaScript che ha modificato il valore (un’altra possibilità menzionata) da una parte diversa dell’app.

pensi di utilizzare l’ evento di cambiamento ?

 $("#myTextBox").change(function() { alert("content changed"); }); 

Utilizzare l’evento textchange tramite shim jQuery personalizzato per compatibilità di input browser. http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (il github più recentemente biforcato: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Gestisce tutti i tag di input tra cui , che non sempre funziona con change keyup ecc. (!) Solo jQuery on("input propertychange") gestisce i tag coerente e quello sopra è uno shim per tutti i browser che non comprendono input evento di input .

       splendid textchange test       

Test JS Bin

Questo gestisce anche l’inserimento, l’eliminazione e non duplica gli sforzi sulla chiave.

Se non si utilizza uno shim, utilizzare gli eventi jQuery on("input propertychange") .

 // works with most recent browsers (use this if not using src="...splendid.textchange.js") $('textarea').on("input propertychange",function(){ yourFunctionHere($(this).val()); }); 

C’è un esempio operativo completo qui .

  jQuery Summing   $(document).ready(function() { $('.calc').on('input', function() { var t1 = document.getElementById('txt1'); var t2 = document.getElementById('txt2'); var tot=0; if (parseInt(t1.value)) tot += parseInt(t1.value); if (parseInt(t2.value)) tot += parseInt(t2.value); document.getElementById('txt3').value = tot; }); });         

Qualcosa del genere dovrebbe funzionare, principalmente perché la focus e il focusout finirebbero con due valori separati. Sto usando i data qui perché memorizza i valori nell’elemento ma non tocca il DOM. È anche un modo semplice per memorizzare il valore connesso al suo elemento. Si potrebbe facilmente usare una variabile con ambito più elevato.

 var changed = false; $('textbox').on('focus', function(e) { $(this).data('current-val', $(this).text(); }); $('textbox').on('focusout', function(e) { if ($(this).data('current-val') != $(this).text()) changed = true; } console.log('Changed Result', changed); }