A bit of IT: Javascript: marca de agua

Una tarea muy común en el desarrollo de una página web es la creación de controles de texto con una marca de agua. A continuación se muestra un ejemplo de esta tarea.

<html>
<head>
<script type="text/javascript">
    function establecerMarcaAgua() {
        var txtTexto = document.getElementById("txtTexto");

        if (txtTexto.value.length == 0) {
            txtTexto.value= "Introduzca el texto aquí";
            txtTexto.className = "marcaAgua";
        }
    }
    function quitarMarcaAgua() {
        var txtTexto = document.getElementById("txtTexto");

        if (txtTexto.value == "Introduzca el texto aquí") {
            txtTexto.value = "";
            txtTexto.className = "texto";
        }
    }
</script>
<style type="text/css">
    .marcaAgua {
        color: gray;
        font-weight: bold;
        font-size: 0.8em;
    }
    .texto {
        color: black;
        font-weight: normal;
        font-size: 1em;
    }
</style>
</head>

<body>
    Texto:
    <input type="text" id="txtTexto" value="Introduzca el texto aquí"
      class="marcaAgua"
    onfocus="quitarMarcaAgua()" onblur="establecerMarcaAgua()" />
</body>
</html>

A continuación se puede ver una versión genérica de las funciones anteriores que se pueden utilizar con múltiples controles.

<html>
<head>
<script type="text/javascript">
   function establecerMarcaAgua(texto, control) {
       if (control.value.length == 0) {
           control.value= "Introduzca el texto aquí";
           control.className = "marcaAgua";
       }
   }
   function quitarMarcaAgua(texto, control) {
       if (control.value == "Introduzca el texto aquí") {
           control.value = "";
           control.className = "texto";
       }
   }
</script>
<style type="text/css">
   .marcaAgua {
       color: gray;
       font-weight: bold;
       font-size: 0.8em;
   }
   .texto {
       color: black;
       font-weight: normal;
       font-size: 1em;
   }
</style>
</head>

<body>
    Texto:
   <input type="text" id="txtTexto" value="Introduzca el texto aquí"
        class="marcaAgua"
       onfocus='quitarMarcaAgua("Introduzca el texto aquí", this)'
       onblur='establecerMarcaAgua("Introduzca el texto aquí", this)' />
</body>
</html>

A bit of IT

martes, 7 de abril de 2015

Javascript: marca de agua

No hay comentarios:

Publicar un comentario