Novedades
Música
 
PELIGROSA (Single) de Micro TDH (Letra, Música)
Caramelo de Rocco Hunt, Lola Indigo, Elettra Lamborghini (Letra, Música)
Prende y Apaga de Ryan Castro, Farina (Letra, Música)
La Chain de Emilia (Letra, Música)
No Te Contesto de Grecia, Zxmyr (Letra, Música)
Blunt de Manira (Letra, Música)
María Becerra se presentó con orgullo en el festival de Suena En TikTok 2022
Las Cometas Siempre Vuelan En Agosto de Morat (Letra, Música)
El Dolor De Mi Vida (Versión Salsa) de Ezio Oliva, Daniela Darcourt (Letra, Música)
Medio Crazy Remix (feat. Rusherking, FMK & Juhn) de NoBeat, Khea, Ingratax (Letra, Música)
Jalo de Banda MS de Sergio Lizarraga (Letra, Música)
Migajas de Lana Oropeza (Letra, Música)
Amor Ordinario de Lana Oropeza (Letra, Música)
Cristo Rey de Sixto Rein (Letra, Música)
Mi Peor Error de Darell (Letra, Música)
Eme de Big Soto, Ryan Castro (Letra, Música)
XT4S1S de Danna Paola (Letra, Música)
Luna De Miel de HIT$ MUSIC, Kevin Roldan (Letra, Música)
Noche de Novela de Paulo Londra, Ed Sheeran (Letra, Música)
El Que Espera de Anitta, Maluma (Letra, Música)
Piensas En Mí de Chesca, Alejo (Letra, Música)
Ay Hombre! de Valentina Olguin, Jay Maly (Letra, Música)
Pa Que de Silvestre Dangond (Letra, Música)
CAUTY presenta «Ponle Dembow» junto al dúo internacional Zion y Lennox
Yo Toy Rulay Desacatao de JC La Nevula (Letra, Música)
Ponle Dembow de Cauty, Zion & Lennox, 574 (Letra, Música)
Somos Iguales (feat. Louchie Lou & Michie One) de Ozuna, Tokischa (Letra, Música)
Kapla y Miky presentan el sencillo musical de «Flete»
La Famosita de JC La Nevula (Letra, Música)
Flete de Kapla y Miky (Letra, Música)
Si Te La Encuentras Por Ahí de Feid (Letra, Música)
La Loto de TINI, Becky G, Anitta (Letra, Música)
TROPA de Anitta, Luck MUZIK (Letra, Música)
MUSA de Juan Avila (Letra, Música)
Personal (feat. Thyago) de Symon Dice, Latenightjiggy, Gigolo Y La Exce (Letra, Música)
Laguna de Neutro Shorty (Letra, Música)
FOLLOWS de Ankhal (Letra, Música)
Ojos Marrones de Lasso (Letra, Música)
Si Si de Tempo (Letra, Música)
Sin Novia de Nicky Jam (Letra, Música)
Conexiones de Miky Woodz (Letra, Música)
Todo My Love de Kenia Os (Letra, Música)
cómo dormiste? de Rels B (Letra, Música)
Contigo de Daniel Huen (Letra, Música)
Julieta de Paulo Londra (Letra, Música)
LOS APARATOS de El Alfa, Noriel, Trueno (Letra, Música)
Llorando En La Disco de st. Pedro, La Pantera, BDP Music (Letra, Música)
María Oliva y su canción «Eres» elegidas para «La canción del verano 2022»
Biografías
 
Marcas Y Productos
 
Leng. De Program.
 
Listas De Páginas
 
Lo+ Visto
Lenguajes De Programación
  1. Enorable
  2. Lenguajes De Programación
  3. Jquery
10
 
03/08/2020 |  vistas:

jQuery: calcular y mostrar caracteres restantes de campos de un formulario HTML

jQuery: calcular y mostrar caracteres restantes de campos de un formulario HTMLDemostració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;
}

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>

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>

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
Todos los titulares en un solo lugar...