CAMPOS CON CONVERSION (II)
Como vimos en la anterior entrada, los input's de formularios html pueden incorporar código javascript online, con diversos fines.
Sin embargo, es preferible utilizar funciones para lograr el mismo objetivo, debido a que diferentes input's pueden beneficiarse de ellas, en lugar de hacernos repetir todo el código de nuevo (el cual se vuelve engorroso al incluirlo online), además de que el código se clarifica más dentro de una función.
He aquí todo el código de una página html que, utilizando 2 funciones, convierte los caracteres introducidos en minúsculas (excepto la primera letra de cada palabra, que la fuerza a mayúsculas), modificando el ejemplo del input 'domicilio' que vimos en la entrada del post anterior. El input 'otros' hace lo mismo, solo que únicamente convierte a mayúsculas el primer caracter de la primera palabra:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es"> - <head>
<title>input conversor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="DTD" name="author"> - <script type="text/javascript" language="JavaScript">
<!-- Begin //para utilizar por distintos inputs
function transforma(dato){
dato.value=dato.value.substring(0,1).toUpperCase() + dato.value.slice(1,50).toLowerCase();
}
function acabar(dato){
var cont;
var fin;
var st;
dato.value=dato.value + ' ';
st=dato.value.split(' ');
for(cont=0; st[cont].length; cont++)st[cont]=st[cont].substring(0,1).toUpperCase() + st[cont].slice(1,50);
dato.value=''; for(fin=0; fin<cont; fin++) dato.value = dato.value+st[fin]+' ';
}
// End -->
</script>
</head> - <body>
<p><span style="font-weight: bold; text-decoration: underline;">FORMULARIO CON CAMPOS CON CONVERSION DE CARACTERES</span></p>
<form enctype="multipart/form-data" method="post" action='enviar.html'>
<p><input name="borrar" type="reset" value="Borrar Datos" /></p>
<p>Domicilio: <input onkeyup="transforma(domicilio);" onblur="acabar(domicilio);" name="domicilio" size="55" /></p>
<p>Otros datos: <input onkeyup="transforma(otros);" name="otros" size="55" /></p>
<p><input name="mandar" type="submit" value="Enviar" /></p>
</form></body></html>
