Novedades
Música
 
Imagen, foto o portada de Que Te Perdone de Nanpa Básico, Nejo (Letra, Música)
Que Te Perdone de Nanpa Básico, Nejo (Letra, Música)
Imagen, foto o portada de Mi Complejo de Andry Kiddos (Letra, Música)
Mi Complejo de Andry Kiddos (Letra, Música)
Imagen, foto o portada de Contigo (feat. Kenzy) de Ren Kai (Letra, Música)
Contigo (feat. Kenzy) de Ren Kai (Letra, Música)
Imagen, foto o portada de Fundota de Bryant Myers (Letra, Música)
Fundota de Bryant Myers (Letra, Música)
Imagen, foto o portada de Hookiao de Lil Silvio & El Vega (Letra, Música)
Hookiao de Lil Silvio & El Vega (Letra, Música)
Imagen, foto o portada de Fenomenal de L-Gante, Noriel, Negro Dub (Letra, Música)
Fenomenal de L-Gante, Noriel, Negro Dub (Letra, Música)
Imagen, foto o portada de El Case de Hozwal (Letra, Música)
El Case de Hozwal (Letra, Música)
Imagen, foto o portada de Pecado Original de María José (Letra, Música)
Pecado Original de María José (Letra, Música)
Imagen, foto o portada de Agradecido de Don Omar (Letra, Música)
Agradecido de Don Omar (Letra, Música)
Imagen, foto o portada de Siempre Le Meto Bellako de Yozuel, Rvsell (Letra, Música)
Siempre Le Meto Bellako de Yozuel, Rvsell (Letra, Música)
Imagen, foto o portada de Gafas de Sol de Lérica (Letra, Música)
Gafas de Sol de Lérica (Letra, Música)
Imagen, foto o portada de Envidia de Neutro Shorty, Ovi (Letra, Música)
Envidia de Neutro Shorty, Ovi (Letra, Música)
Imagen, foto o portada de Ulala de Myke Towers, Daddy Yankee (Letra, Música)
Ulala de Myke Towers, Daddy Yankee (Letra, Música)
Imagen, foto o portada de VICTORIA de Izaak, Lenny Tavarez (Letra, Música)
VICTORIA de Izaak, Lenny Tavarez (Letra, Música)
Imagen, foto o portada de Frío de NICKI NICOLE (Letra, Música)
Frío de NICKI NICOLE (Letra, Música)
Imagen, foto o portada de Si Yo Me Muero de Anuel AA, Mvsis (Letra, Música)
Si Yo Me Muero de Anuel AA, Mvsis (Letra, Música)
Imagen, foto o portada de Eres de Manuel Carrasco (Letra, Música)
Eres de Manuel Carrasco (Letra, Música)
Imagen, foto o portada de Necio de Paulo Londra, Lit Killah (Letra, Música)
Necio de Paulo Londra, Lit Killah (Letra, Música)
Imagen, foto o portada de Freestyle de Darkiel, Nino Freestyle, Jon Z (Letra, Música)
Freestyle de Darkiel, Nino Freestyle, Jon Z (Letra, Música)
Imagen, foto o portada de Baila En La 42 de Nacho, Don Forty Five, Mercenario Musik (Letra, Música)
Baila En La 42 de Nacho, Don Forty Five, Mercenario Musik (Letra, Música)
Imagen, foto o portada de NOTEVI de Noreh, Jimmix (Letra, Música)
NOTEVI de Noreh, Jimmix (Letra, Música)
Imagen, foto o portada de Fiesta del Amor (feat. Fabianporti) de MarLo La Letra (Letra, Música)
Fiesta del Amor (feat. Fabianporti) de MarLo La Letra (Letra, Música)
Imagen, foto o portada de Desorden de Sharlene (Letra, Música)
Desorden de Sharlene (Letra, Música)
Imagen, foto o portada de Vaina Bacana de Martina La Peligrosa (Letra, Música)
Vaina Bacana de Martina La Peligrosa (Letra, Música)
Imagen, foto o portada de Mi Rival de Karen Méndez (Letra, Música)
Mi Rival de Karen Méndez (Letra, Música)
Imagen, foto o portada de Pa La Vuelta de ITZZA PRIMERA, Cauty (Letra, Música)
Pa La Vuelta de ITZZA PRIMERA, Cauty (Letra, Música)
Imagen, foto o portada de Bayamón de Elena Rose (Letra, Música)
Bayamón de Elena Rose (Letra, Música)
Imagen, foto o portada de Tu Cariñito de Olga Tañón (Letra, Música)
Tu Cariñito de Olga Tañón (Letra, Música)
Imagen, foto o portada de Judas de Pipe Calderón (Letra, Música)
Judas de Pipe Calderón (Letra, Música)
Imagen, foto o portada de Indestructible de Le Coco (Letra, Música)
Indestructible de Le Coco (Letra, Música)
Imagen, foto o portada de QUIÉN SABE de Joey Montana, El Zeta (Letra, Música)
QUIÉN SABE de Joey Montana, El Zeta (Letra, Música)
Imagen, foto o portada de Aroma de Brytiago, Lenny Tavárez, Beéle (Letra, Música)
Aroma de Brytiago, Lenny Tavárez, Beéle (Letra, Música)
Imagen, foto o portada de Sueños (feat. La Tinta) de AnnyBell, Sixto Rein, La Tinta (Letra, Música)
Sueños (feat. La Tinta) de AnnyBell, Sixto Rein, La Tinta (Letra, Música)
Imagen, foto o portada de Peru - Spanish Version (Remix) de Jay Maly (Letra, Música)
Peru - Spanish Version (Remix) de Jay Maly (Letra, Música)
Imagen, foto o portada de Quemando Money de Freitas (Letra, Música)
Quemando Money de Freitas (Letra, Música)
Imagen, foto o portada de Underground de Emilia (Letra, Música)
Underground de Emilia (Letra, Música)
Imagen, foto o portada de Sin Ti de Agus Padilla, Lauta, Migrantes (Letra, Música)
Sin Ti de Agus Padilla, Lauta, Migrantes (Letra, Música)
Imagen, foto o portada de Presidentes Muertos (feat. YOVNGCHIMI) de Casper Mágico, Anuel AA, Bryant Myers (Letra, Música)
Presidentes Muertos (feat. YOVNGCHIMI) de Casper Mágico, Anuel AA, Bryant Myers (Letra, Música)
Imagen, foto o portada de Intensa de Danny Romero (Letra, Música)
Intensa de Danny Romero (Letra, Música)
Imagen, foto o portada de La Clave de Luis Figueroa (Letra, Música)
La Clave de Luis Figueroa (Letra, Música)
Imagen, foto o portada de Delirio Y Tortura (feat. Luar La L) de Brray, Luar La L (Letra, Música)
Delirio Y Tortura (feat. Luar La L) de Brray, Luar La L (Letra, Música)
Imagen, foto o portada de Dubai de IAmChino, Rafa Pabön (Letra, Música)
Dubai de IAmChino, Rafa Pabön (Letra, Música)
Imagen, foto o portada de Mi Felicidad de j mena (Letra, Música)
Mi Felicidad de j mena (Letra, Música)
Imagen, foto o portada de Benzo de Messiah (Letra, Música)
Benzo de Messiah (Letra, Música)
Imagen, foto o portada de SOMOS NOSOTROS de REI (Letra, Música)
SOMOS NOSOTROS de REI (Letra, Música)
Imagen, foto o portada de Lágrimas de Champan de Gente De Zona, Dale Pututi, El Carli (Letra, Música)
Lágrimas de Champan de Gente De Zona, Dale Pututi, El Carli (Letra, Música)
Imagen, foto o portada de CAIRO de Karol G, Ovy On The Drums (Letra, Música)
CAIRO de Karol G, Ovy On The Drums (Letra, Música)
Imagen, foto o portada de Puntos Débiles de Omy de Oro, Brytiago (Letra, Música)
Puntos Débiles de Omy de Oro, Brytiago (Letra, Música)
Biografías
 
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...