Añadir contador de caracteres restantes a caja de texto

La idea es teniendo una caja de texto o un elemento input añadir un contador de los caracteres que faltan y que se vaya actualizando a medida que escribimos.


para ello utilizamos JQuery y la siguiente libreria:

(function($) {
'use strict';

$.fn.countChar = function() {

return this.each(function(i, element) {
$(element).keyup(function updateCharCounter() {

var $me = $(this);
var maxLength = parseInt($me.attr('maxlength'), 10);
var charCount = $me.val().length;
var nombrecajalimite=$me.prop('id')+"_limit";
var cajalimite = $('#'+nombrecajalimite);

cajalimite.text('' + maxLength + '/' + (maxLength - charCount));
});

var $me = $(this),
maxLength = parseInt($me.attr('maxlength'), 10),
charCount = $me.val().length;
var nombrecajalimite=$me.prop('id')+"_limit";
var cajalimite = $('#'+nombrecajalimite);
if (cajalimite){
$me.after('<p id="'+nombrecajalimite+'" class="limit"></p>');
}
cajalimite = $('#'+nombrecajalimite);
cajalimite.text('' + maxLength + '/' + (maxLength - charCount));

});
};


$( "<style>.limit { float: right; clear: both; margin-bottom: 10px; font: 400 0.688em/1.38 'Roboto'; text-align: right; color: #777777;}</style>" ).appendTo( "head" )



}(jQuery));

Con esto lo único que tenemos que hacer es añadir una clase a nuestra caja de texto:

<div class=" clearfix">
<label class="_text">Caja de texto con maxlength = 50</label>
<input id="nickname" class="cuentacaracteres _textfield" size="32" maxlength="50" placeholder="counter.js">
</div>

Y añadir al final del documento la linea que lo enlaza:

<script>

$(document).ready(function (){
'use strict';

// works on one field
$('.cuentacaracteres').countChar();
});
</script>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

* Please enter the Biggest Number