03/08/2020
jQuery: calcular y mostrar caracteres restantes de campos de un formulario HTML
Demostración con jQuery para calcular, contar y mostrar los caracteres restantes de los campos de un formulario mientras el usuario ingresa datos a discreción, haciendo uso de una expresión de función.En esta oportunidad vamos a explicar cómo se puede trabajar con una función anónima creada con la biblioteca multiplataforma de jQuery para calcular, contar y mostrar de manera básica y sencilla, la cantidad de caracteres restantes de acuerdo a la definición del atributo «maxlength» de los campos de un formulario escrito en un documento HTML.
Para comprender este ejercicio es necesario que el usuario/a tenga conocimientos básicos en JavaScript y jQuery
El código implementado fue probado con el uso de las versiones más recientes de jQuery (jQuery Core - All 3.x Versions).
Puede visualizar el resultado a través de una demo.
Código o «SCRIPT» para mostrar el número de caracteres restantes de un campo
Haga una llamada para usar la biblioteca jQuery.Copie y pegue el código entre las etiquetas «HEAD».
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Definición de estilo CSS (style)
Copie y pegue el código entre las etiquetas «STYLE».
.box_inside_elem{
display:block;
position:absolute;
bottom:0;
right:0;
width:30px;
font-size:14px;
padding:0 5px;
box-sizing:border-box;
background-color:#CDCDCD;
border:1px solid #A1A1A1;
color:#666;
text-align:center;
font-weight:bold;
}
.elem_form{
position:relative;
display:block;
width:100%;
height:auto;
margin:10px auto;
padding:10px 10px;
box-sizing:border-box;
font-size:14px;
outline:none;
}
display:block;
position:absolute;
bottom:0;
right:0;
width:30px;
font-size:14px;
padding:0 5px;
box-sizing:border-box;
background-color:#CDCDCD;
border:1px solid #A1A1A1;
color:#666;
text-align:center;
font-weight:bold;
}
.elem_form{
position:relative;
display:block;
width:100%;
height:auto;
margin:10px auto;
padding:10px 10px;
box-sizing:border-box;
font-size:14px;
outline:none;
}
Definición de código jQuery (script).
Copie y pegue el código entre las etiquetas «HEAD» o «BODY».
<script type="application/javascript">
$(function(){ $("form").find("input[type=text],input[type=password],textarea").each(function(idx,elem){
var _f_=$(this),_maxlen_=_f_.attr("maxlength");
/* Inicio - Expresión de Función para calcular longitud restante de los campos */
var _cur_len_=function(a,b){
var _e_=(typeof a!=="undefined"&&a.length>0)?a:"undefined",
_m_l_=(typeof b!=="undefined"?b:0);
length=(_e_!=="undefined"&&(_e_.val().length>=0&&_e_.val().length<=_m_l_))?length=_e_.val().length:length=_m_l_;
var c = function(){
var n,me=(_e_.nextAll(".box_inside_elem").length===0)
?_e_.after($('<div class="box_inside_elem">'+_m_l_+'</div>').css({"display":"block","position":"absolute","bottom":"0","right":"0","width":"30px","font-size":"14px","font-weight":"bold"}))
:'';
_e_.nextAll(me).each(function(e){
self=$(this);});
return {
get:self.html(),
set:function(x){
self.html(x);
},
reset:self.html(_m_l_)
};
}();
return {
current:function(){
if(length<_m_l_){
c.set(_m_l_-length);
}else{
if((_m_l_+1)>c.get){
c.set(length-_m_l_);
}
}
},
reset:function(){
c.reset
},
length:length,
remaining:_m_l_-length
}
};
/* FIN - Función */
_f_.on("keyup",function(e){
var keycode = e.which;
if(keycode >= 46 || keycode == 32 || keycode == 8){
_cur_len_(_f_,_maxlen_).current();
}
if(_maxlen_<=_f_.val().length){
_f_.val(_f_.val().substr(0,_maxlen_));
return false;
}
});
});
});
</script>
$(function(){ $("form").find("input[type=text],input[type=password],textarea").each(function(idx,elem){
var _f_=$(this),_maxlen_=_f_.attr("maxlength");
/* Inicio - Expresión de Función para calcular longitud restante de los campos */
var _cur_len_=function(a,b){
var _e_=(typeof a!=="undefined"&&a.length>0)?a:"undefined",
_m_l_=(typeof b!=="undefined"?b:0);
length=(_e_!=="undefined"&&(_e_.val().length>=0&&_e_.val().length<=_m_l_))?length=_e_.val().length:length=_m_l_;
var c = function(){
var n,me=(_e_.nextAll(".box_inside_elem").length===0)
?_e_.after($('<div class="box_inside_elem">'+_m_l_+'</div>').css({"display":"block","position":"absolute","bottom":"0","right":"0","width":"30px","font-size":"14px","font-weight":"bold"}))
:'';
_e_.nextAll(me).each(function(e){
self=$(this);});
return {
get:self.html(),
set:function(x){
self.html(x);
},
reset:self.html(_m_l_)
};
}();
return {
current:function(){
if(length<_m_l_){
c.set(_m_l_-length);
}else{
if((_m_l_+1)>c.get){
c.set(length-_m_l_);
}
}
},
reset:function(){
c.reset
},
length:length,
remaining:_m_l_-length
}
};
/* FIN - Función */
_f_.on("keyup",function(e){
var keycode = e.which;
if(keycode >= 46 || keycode == 32 || keycode == 8){
_cur_len_(_f_,_maxlen_).current();
}
if(_maxlen_<=_f_.val().length){
_f_.val(_f_.val().substr(0,_maxlen_));
return false;
}
});
});
});
</script>
Nota: nuestra función anónima se encuentra definida en el objeto _cur_len_ y el mismo puede acceder a los métodos de la función: .current(), .reset() y .length();
Cuando se envía un formulario a través de Ajax puede usar el método .reset() para mostrar los valores del "maxlength" definidos por el usuario.
Definición del documento HTML (body).
Copie y pegue el código entre las etiquetas «BODY».
<form autocomplete="off">
<fieldset>
<legend>Información Requerida</legend>
<div style="position:relative;width:auto;"><input type="text" placeholder="Ingrese su nombre" maxlength="20" class="elem_form"><div class="box_inside_elem">20</div></div>
<div style="position:relative;width:auto;"><input type="text" placeholder="Ingrese su apellido (*)" maxlength="20" class="elem_form"><!--<div class="box_inside_elem">20</div>--></div>
<div style="position:relative;width:auto;"><input type="text" placeholder="Ingrese su correo" maxlength="60" class="elem_form"><div class="box_inside_elem">20</div></div>
<div style="position:relative;width:auto;"><textarea placeholder="Por favor escriba su mensaje" maxlength="140" class="elem_form"></textarea><div class="box_inside_elem">140</div></div>
<input type="submit" value="Enviar">
</fieldset>
</form>
<fieldset>
<legend>Información Requerida</legend>
<div style="position:relative;width:auto;"><input type="text" placeholder="Ingrese su nombre" maxlength="20" class="elem_form"><div class="box_inside_elem">20</div></div>
<div style="position:relative;width:auto;"><input type="text" placeholder="Ingrese su apellido (*)" maxlength="20" class="elem_form"><!--<div class="box_inside_elem">20</div>--></div>
<div style="position:relative;width:auto;"><input type="text" placeholder="Ingrese su correo" maxlength="60" class="elem_form"><div class="box_inside_elem">20</div></div>
<div style="position:relative;width:auto;"><textarea placeholder="Por favor escriba su mensaje" maxlength="140" class="elem_form"></textarea><div class="box_inside_elem">140</div></div>
<input type="submit" value="Enviar">
</fieldset>
</form>
A tomar en cuenta
Tome en cuenta que al momento de producir su formulario HTML la función recoge la información almacenada en el atributo "maxlength" para mostrar y recalcular los caracteres restantes de cada campo.
Para el segundo campo que hemos definido en el formulario comentamos un elemento hijo («<!--<div class="box_inside_elem">20</div>-->»), para demostrar que cuando no existe, la función crea el elemento.
La función sólo evalúa los campos de tipo "text", "password" y "textarea".
Consulta Lo+ Top de Lenguajes De Programación