jQuery Character Counter für mehrere Eingänge

Question

Ich habe etwa 8 Texteingaben. Am Ende wurden sie alle mit PHP verknüpft, aber um die Benutzerfreundlichkeit zu erhöhen, habe ich sie in mehrere "Fragen" aufgeteilt.

Die Felder werden am Ende verkettet und in einer SMS-Umgebung verwendet, in der ein Code von 160 Zeichen abgeschnitten wird. Ich muss alle 8 Eingaben mit jQuery zählen, um den Benutzern zu zeigen, wenn sie diese 160-Zeichen-Marke überschreiten.

Ich kann natürlich sehr leicht dies mit einer beliebigen Anzahl von Zeichen zählen Plugins da draußen, aber sie sind alle mit einem einzigen Textarea im Auge, nicht in mehrere Eingänge aufgeteilt.

Ich begann dieses mit

var current_count = parseInt($('#chars-remain span').text()); 

var regex=/^[a-zA-Z0-9\s]+$/; 
if(regex.test($(this).val())){ 
    var current_left = current_count - 1; 
} 

if (current_left <= 0) { 
    $('#chars-remain span').addClass('outOfChars'); 
} else { 
    $('#chars-remain span').removeClass('outOfChars'); 
} 
$('#chars-remain span').text(current_left); 

und das HTML so etwas wie

<p id="chars-remain"><span>160</span> Characters Remain</p> 

zu bauen, aber sie nicht wirklich funktionieren. Wenn Sie den Delete-Schlüssel verwenden, zählt es immer noch als -1 zum Gesamtwert und es gibt ein paar andere Fehler. Gibt es eine Möglichkeit, den obigen Code zu verwenden und es funktioniert oder gibt es ein Plugin, das dies tut, das ich nicht finden kann oder vielleicht jemand eine bessere Idee hat, was zu versuchen?

Danke !!

/// * EDIT ** \ *

Meine aktuellen jQuery ist Setup wie folgt aus:

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show(); 
    $('#in-lastName').text($('#last_name').val()).show(); 
    $('#in-titlePosition').text($('#job_title').val()).show(); 
    $('#in-company').text($('#company_name').val()).show(); 
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } 
    $('#in-emailAddress').text($('#email').val()).show(); 
    $('#in-website').text($('#website').val()).show(); 

}); 

Dies ermöglicht es mir, so dass während der Benutzer tippt auf den Feldern, es eine zeigt Beispiel, wie die SMS in einer Box neben der Seite aussehen wird. Wenn ich also versuche, K4emics Antwort zu verwenden, funktioniert es größtenteils, aber auf dem Office Phone und dem Handy fügt es automatisch das 'o:' und 'm:' hinzu, also brauche ich eine Möglichkeit, diese drei zusätzlichen Zeichen zu sammeln auch. Vielleicht wäre es sinnvoller, die Zeichen der Absätze zu zählen, nachdem die Eingabe auf sie geschrieben hat, damit die automatisch hinzugefügten Zeichen ebenfalls gezählt werden?

Answer 1

Dies scheint den Trick zu tun!

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show(); 
    $('#in-lastName').text($('#last_name').val()).show(); 
    $('#in-titlePosition').text($('#job_title').val()).show(); 
    $('#in-company').text($('#company_name').val()).show(); 
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } else{ $('#in-officePhone').text('');} 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } else{ $('#in-mobilePhone').text('');} 
    $('#in-emailAddress').text($('#email').val()).show(); 
    $('#in-website').text($('#website').val()).show(); 

    var count = 0; 
    $('p.count_me').each(function(i){ 
     count += $(this).text().length; 
    }); 
    $('#credits-remain span').text(count); 
    $('#character_count').val(count); 

    if (count > 120) { 
     $('#credits-remain span').addClass('lowChars'); 
     $('#credits-remain span').removeClass('outOfChars'); 
    } else if (count > 140) { 
     $('#credits-remain span').addClass('outOfChars'); 
     $('#credits-remain span').removeClass('lowChars'); 
    } else { 
     $('#credits-remain span').removeClass('lowChars'); 
     $('#credits-remain span').removeClass('outOfChars'); 
    } 
}); 

Answer 2

Der einfachste Weg, den ich mir vorstellen kann, besteht darin, einfach ein verborgenes Feld zu erstellen und dessen Wert dynamisch so zu ändern, dass es der verketteten Zeichenfolge aus den anderen acht Feldern entspricht. Sie könnten dann nur die Länge dieses Feldes nehmen.

Answer 3

Die Listener für alle Felder zu registrieren, die in der Größe begrenzt sein sollten und die Eingabe jedes Mal neu bewerten sollten, scheint mir die offensichtlichste Lösung zu sein. Beachten Sie, dass die Keyup-Callback-Funktion ausgelöst wird, nachdem die Eingabe in das Eingabefeld eingefügt wurde, während Keydown und Keypress ausgelöst werden, bevor die Änderung vorgenommen wird.

var limited = $('.limited').keyup(function(event) { 

    var length = 0; 
    var contents = ''; 

    limited.each(function(index, element) { 
     length += $(element).val().length; 
     contents += $(element).val(); 
    }); 

    console.log(length); 
    console.log($(this).val()); 
    console.log(contents); 

}); 

Answer 4

Ich tat eine ähnliche Sache, aber auf die einfachste Weise wusste ich wie. Ich habe auch die Gesamtfarbe geändert, wenn die Summe über 149 Zeichen und dann über 160 Zeichen betrug.

<form id="form1" method="post" action=""> 
     <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="company" id="company" /> 
     <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="delivery" id="delivery" /> 
</form> 
<div id="details-total">Details: 0 characters</div> 


<script type="text/javascript"> 
<!-- 

function updateDetails() { 
    var total1 = document.getElementById('company').value.length; 
    var total2 = document.getElementById('delivery').value.length; 
    var grandTotal = total1+total2; 

    if (grandTotal < 150) { 
     document.getElementById('details-total').innerHTML = '<span style="color: #20851e;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else if (grandTotal < 161) { 
     document.getElementById('details-total').innerHTML = '<span style="color: #ff7800;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else { 
     document.getElementById('details-total').innerHTML = '<span style="color: #fa0023; font-weight: bold;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } 
} 

//--> 
</script>