Cómo crear un cuadro de texto de jQuery con marca de agua

Escrito por amy scott | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear un cuadro de texto de jQuery con marca de agua
Puedes crear un cuadro de texto con marca de agua usando el lenguaje de codificación jQuery. (Hemera Technologies/AbleStock.com/Getty Images)

Los cuadros de texto pueden ser muy importantes en un sitio web como forma para introducir información en un sitio. Usando el lenguaje de codificación jQuery, puedes crear un cuadro de texto con marga de agua para tu sitio web. Este cuadro de texto puede después mostrar palabras con marcas de agua. Esto puede ser útil para explicar para qué es tu sitio o para que capte la atención, ahorrando espacio o simplemente haciendo que el sitio tenga un aspecto menos abarrotado. Puedes crear este efecto jQuery creando primero el cuadro de texto en el archivo HTML, creando una clase CSS para el estilo del texto de la marca de agua y después usando jQuery para añadir el texto de la marca de agua en el cuadro de texto.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML de la página web donde quieres que aparezca el cuadro de texto con la marca de agua. Busca el lugar en el archivo HTML donde quieres colocar el cuadro de texto y haz clic para mover el cursor a ese lugar.

  2. 2

    Escribe el siguiente código:

    <input type="text" name="Name" id="idofthetextbox" value="Value" />

    para crear un cuadro de texto. Cambia "Name" por el nombre que quieres usar para el cuadro de texto y cambia el valor "idofthetextbox" por un número único que no hayas usado para ningún otro ID de campo de entrada en el sitio. Cambia "Value" por un valor único para el campo de texto. Por ejemplo, si quieres que el visitante introduzca una dirección de e-mail en el cuadro de texto, ponle el valor "email".

  3. 3

    Abre el archivo CSS style.css del sitio. Crea una nueva clase CSS escribiendo:

    .lightText{ color : #000000; }

    Cambia el valor "#000000" con el valor hexadecimal para el color que quieres que tenga el texto de la marca de agua.

  4. 4

    Abre el archivo HTML de la página web y escribe el siguiente código después del código del cuadro de texto:

    <script> $("#Name").addClass("lightText") // set default value .val("Name") // onfocus action .focus(function(){ if($(this).val() == "Name"){ $(this).removeClass("lightText").val("Value"); } // focus lost action }).blur(function(){ if($(this).val() == "Value"){ $(this).val("Name").addClass("lightText"); } }); </script>

    Cambia el texto "Name" por el nombre de tu cuadro de texto. Cambia "Value" por su valor.

  5. 5

    Guarda todos los archivos y cárgalos en tu sitio web, sobrescribiendo los anteriores.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles