2011-09-14 14 views
8

Sto usando le seguenti funzionalità di jQuery per contare le parole in tempo reale:jQuery: il conteggio delle parole in tempo reale

$("input[type='text']:not(:disabled)").each(function(){ 
      var input = '#' + this.id; 
      word_count(input); 

      $(this).keyup(function(){ 
       word_count(input); 
      }) 

     }); 

var word_count = function(field) { 
     var number = 0; 
     var original_count = parseInt($('#finalcount').val()); 
     var matches = $(field).val().match(/\b/g); 
     if(matches) { 
      number = matches.length/2; 
     } 
     $('#finalcount').val(original_count + number) 
    } 

L'edizione che sto funzionando in è che quando si digita in un campo di input, il conteggio aumenta immediatamente di due, anche su spazi e il mio tasto di cancellazione. Qualche idea sul perché questo accada?

stavo seguendo questo tutorial: http://www.electrictoolbox.com/jquery-count-words-textarea-input/

ingresso: <input class="widest" id="page_browser_title" name="page[browser_title]" size="30" type="text" value="">

display di ingresso: <input class="widest" disabled="disabled" id="finalcount" name="page[word_count]" size="30" type="text" value="662">

+0

Puoi inserire il codice HTML anche per il div immissione e la visualizzazione? – willdanceforfun

+1

Hai un [jsfiddle] (http://jsfiddle.net)? –

+0

Ecco un collegamento a jsfiddle ... http://jsfiddle.net/M7Jny/ – dennismonsewicz

risposta

14

Si incrementando ad ogni pressione di un tasto, perché si sta dicendo a con:

$('#finalcount').val(original_count + number) 

E se si aggiunge un'altra parola, vi accorgerete che non aumenta di 2, ma per 3. Presumibilmente, si avere diversi input sulla pagina e si intende inserire l'ultimo conteggio per visualizzare il numero di parole in ciascun input. Memorizza i conteggi in una variabile e aggiungi le variabili insieme per ottenere il valore del valore finale. O contare le parole in ogni input ogni volta.

var wordCounts = {}; 

function word_count (field) { 
    var number = 0; 
    var matches = $(field).val().match(/\b/g); 
    if (matches) { 
     number = matches.length/2; 
    } 
    wordCounts[field] = number; 
    var finalCount = 0; 
    $.each(wordCounts, function(k, v) { 
     finalCount += v; 
    }); 
    $('#finalcount').val(finalCount) 
} 

demo di lavoro: http://jsfiddle.net/gilly3/YJVPZ/

Edit: A proposito, hai avuto qualche opportunità per semplificare il codice un po ', rimuovendo una certa ridondanza. È possibile sostituire tutti i JavaScript hai postato con questo:

var wordCounts = {}; 
$("input[type='text']:not(:disabled)").keyup(function() { 
    var matches = this.value.match(/\b/g); 
    wordCounts[this.id] = matches ? matches.length/2 : 0; 
    var finalCount = 0; 
    $.each(wordCounts, function(k, v) { 
     finalCount += v; 
    }); 
    $('#finalcount').val(finalCount) 
}).keyup(); 

http://jsfiddle.net/gilly3/YJVPZ/1/

+0

Grazie mille !!!! – dennismonsewicz

+0

L'unica cosa su cui sono confuso è il binding ridondante della chiave di volta .. puoi spiegarlo un po '? – dennismonsewicz

+0

'.keyup()' con un argomento di funzione passato associa l'evento keyup a quella funzione. Ma, se si omette l'argomento della funzione, '.keyup()' attiva l'evento keyup, chiamando la funzione associata. È l'equatore di '.trigger (" keyup ")'. L'ho incluso per far combaciare la funzionalità che avevi nel tuo codice dove 'word_count()' viene chiamato nello stesso momento in cui l'evento è vincolato. – gilly3

4

Modifica

Controllare this example.


Perché non utilizzare split(" ") anziché corrispondere e dividere il risultato? Avrai un array contenente tutte le tue parole, la lunghezza dell'array sarà il numero di parole.

var matches = $(field).val().split(" "); 

Inoltre, perché stai aggiungendo ogni volta le partite al vecchio risultato?

$('#finalcount').val(original_count + number) 

Non aggiungere ogni volta tutte le parole due volte?

+0

Puoi usare 'number = matches.filter (function (word) {return word.length> 0}). Length;' per evitare di contare più spazi come parole. – Dennis

+0

@Jose - grazie per il commento! La corrispondenza (\ b \ g) corrisponde esattamente a ciò che sto cercando, non funziona proprio sulla chiave per qualche motivo.Il suo conteggio ogni operazione keyup – dennismonsewicz

+0

@Dennis: bel tocco, aggiunto alla risposta! –

Problemi correlati