Tamaño de los campos relativo al navegador

05/10/01 - Si creamos un formulario con unos campos de texto en una página web podremos observar que Internet Explorer no coloca el mismo tamaño a los campos de texto que Netscape. En concreto, los campos que coloca Netscape son de mayor tamaño para un mismo atributo size en el campo.

Generalmente se soluciona poniendo los campos de texto más pequeños para que quepan en el diseño en Netscape, pero en ocasiones querremos que los campos sean del tamaño justo y que en Internet Explorer no sean demasiado pequeños y que en Netscape demasiado grandes. Esto puede ocurrir, por ejemplo, en diseños calculados muy a la medida.

Concretando, el tamaño de los campos se aplica con el atributo size de la etiqueta <INPUT> y queremos hacer que el size indicado dependa del navegador que estamos usando.

Distinguir los navegadores

Para ello deberemos crear un script de Javascript que distinga entre los dos navegadores y escribir mediante javascript el atributo size con un valor distinto para cada caso.

Distinguir dinámicamente entre los navegadores es una tarea que puede ser bastante complicada y digna de otro reportaje, pero podríamos hacerlo de una manera parecida a esta.

if (document.layers)
//hago cosas para Netscape 4
else
// hago cosas para otros navegadores

Con este código discrimino tan solo entre la versión 4 de Netscape y todos los demás navegadores. Es por que Netscape 4 es el único navegador cuya jerarquía de objetos incluye un objeto denominado layers. Al introducir ese nombre de objeto en la expresión a evaluar del if, obtendremos casos positivos si el objeto existe (Netscape4) y negativos si no existe (los demás).

Escribir cosas distintas en cada caso

Ahora vamos a poner el código Javascript que escribiría un campo de texto con un valor de size distinto para cada navegador.

if (document.layers)
document.write("<INPUT type=text size=12>")
else
document.write("<INPUT type=text size=16>")

Colocamos el script en un formulario

Es bien simple, sólo nos queda colocar ese código dentro de un formulario y tendremos un campo de texto con sizes distintos pero con el mismo tamaño en la pantalla.

<FORM>
<script language="JavaScript">
if (document.layers)
document.write("<INPUT type=text size=12>")
else
document.write("<INPUT type=text size=16>")
</script>
</FORM>

Se puede ver este ejemplo en una página a parte.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba