[JavaScript] Conteggio caratteri inseriti in input

[Roberto]

Dato un campo di input in cui inserire una username, vogliamo contare in modo dinamico i caratteri inseriti:

Codice: Seleziona tutto

<div>
    <label>Nome Account</label>
</div>
<div>
    <input type="email" id="username" />
    <span><span id="count_number_chars">0</span>/30</span>
</div>

basta creare uno script java in cui inserire queste due funzioni:

Codice: Seleziona tutto

events: {
	'input input#username' : 'updateCounterCharUsername'
}

updateCounterCharUsername : function(e) {
	$('#count_number_chars').html($('#username').val().length);
}

[Roberto]

Un ulteriore miglioramento al nostro script potremmo ottenerlo facendo in modo che un pulsante per l'invio dei dati sia attivato solo dopo che e' stato inserito in input.

Per far cio' creiamo un pulsante inizialmente disabilitato:

Codice: Seleziona tutto

<div>
    <button class="md-btn md-raised m-b-sm w-xs blue" id="btn-accedi" disabled="" style="font-family:'Century Gothic Normale', 'Century Gothic'; font-weight:400;
                          font-style:normal; font-size:14px;">Accedi</button>
</div>

e modifichiamo la funzione del nostro script precedente nel seguente modo:

Codice: Seleziona tutto

updateCounterCharUsername : function(e) {
   var username_label = $('#username').val();
   $('#count_number_chars').html($('#username').val().length);

   (username_label.length === 0) ?  $("#btn-accedi").attr('disabled','disabled') : $('#btn-accedi').removeAttr('disabled');
}