martes, 7 de abril de 2015

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>

No hay comentarios:

Publicar un comentario