Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: bermartinv en 15 de Marzo 2016, 13:20
-
Hola chicos, adjunto código para el ejercicio de este tema CU01176E del tutorial básico de programación web JavaScript desde cero.
Crea un script que recorra todos los elementos input dentro de cada uno de los formularios presentes y si son de tipo text, modifique su atributo asociado maxlength usando el método setAttribute de los objetos tipo Element para limitar a 8 el número máximo de caracteres que pueda introducir el usuario. Una vez modificado el atributo, muestra por pantalla el valor que tiene dicho atributo para todos los elementos de tipo input usando el método getAttribute.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
label{
display:block;
margin:5px;
}
#ejemplo {
width: 300px;
height: 30px;
background-color:bisque;
border-radius:10px;
border : solid 2px black;
box-shadow: 10px 5px 3px;
position: absolute;
left: 400px;
cursor: pointer;
text-align:center;
line-height: 30px;
}
</style>
<script>
var formulario = document.forms;
window.onload = function (){
var boton = document.getElementById('ejemplo');
boton.addEventListener('click',manejo);
}
function manejo(){
asignarmaxLength();
mostrarmaxLength();
}
function asignarmaxLength(){
for (var i = 0;i<formulario.length;i++){
for (var j=0;j<formulario[i].elements.length;j++){
if (formulario[i].elements[j].type=='text'){
formulario[i].elements[j].setAttribute ('maxlength',8);
}
}
}
}
function mostrarmaxLength(){
msg = 'Hay '+formulario.length+' formularios';
for (var i = 0;i<formulario.length;i++){
msg += '\n El formulario '+(i+1)+' tiene los siguientes elementos: ';
for (var j=0;j<formulario[i].elements.length;j++){
if (formulario[i].elements[j].type == 'text'){
msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' con name '+formulario[i].elements[j].name+' su id es '+formulario[i].elements[j].id+' y su maxlength es de '+formulario[i].elements[j].maxLength+' caracteres';
// en caso de uso de getAttribute seria:
// formulario[i].elements[j].getAttribute('maxlength');
}else{
msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' su id es '+formulario[i].elements[j].id+' y no tiene definido el atributo maxlength';
}
}
}
alert (msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo"> setAttribute/getAttribute con maxLength</div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamación</h2>
<label>Motivo reclamación:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body>
</html>
Saludos
-
Buenas tardes, todo bien
Como indicas en el comentario para recuperar el valor del atributo usando getAttribute se haría así (solo indico la línea implicada):
msg += '\n Elemento input de tipo '+formulario[i].elements[j].type+' con name '+formulario[i].elements[j].name+' su id es '+formulario[i].elements[j].id+' y su maxlength es de '+formulario[i].elements[j].getAttribute('maxlength')+' caracteres';
Saludos