Javascript "marcas de agua" para cuadros de texto

Me gustaría saber cómo poner texto en un cuadro de texto cuando se carga la página. Ejemplo: si tengo una página de inicio de sesión, tendría 2 cuadros de texto llamados "nombre de usuario" y "contraseña". Cuando la página se carga, quiero que el cuadro de texto se cargue con el "nombre de usuario" escrito adentro, así que no tendré que poner una etiqueta para eso afuera. Pero cuando el usuario hace clic dentro de la caja de texto debería desaparecer. ¿Cómo hago esto?Javascript "marcas de agua" para cuadros de texto

Fuente

2009-12-15 sin

http://stackoverflow.com/a/16471949/1257652 –

<input name="q" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

... desde el cuadro de búsqueda desbordamiento de pila.

También puede añadir el evento onblur para comprobar: if (this.value=='') this.value = 'search'

Esto sería volver a imprimir la marca de agua, cuando el usuario hace clic fuera del cuadro de texto y el campo está vacío.

Fuente

2009-12-15 23:48:37

1 por simplicidad. – Brandon

También haría que el texto sea más grisáceo y no negro – Faruz

Hay muchos tutoriales sobre cómo hacer esto. Here's one walkthrough utilizando el marco jQuery javascript.

Aquí está another popular blog post, solo con javascript normal.

Fuente

2009-12-15 23:50:12 womp

JS:

function clearDefault(ctl){ 
     if(ctl.value==ctl.defaultValue) { ctl.value = ""; } 
    }

En el cuadro de texto incluyen onfocus="clearDefault(this)" y establecer su texto a "nombre de usuario" o "contraseña".

Fuente

2009-12-15 23:50:18 jball

No utilice el atributo 'onfocus'. Use eventos en su lugar –

Los atributos 'onfocus' (así como' onblur') son esencialmente eventos. Sus valores son iguales al cuerpo de una función vinculada al evento. Así que tener 'clearDefault (this)' para 'onfocus' es esencialmente tener este límite como su manejador de eventos' focus': 'function() {clearDefault (this); } ' –

Ver este artículo http://www.alistapart.com/articles/makingcompactformsmoreaccessible. Por supuesto, si está utilizando jQuery, hay complementos "Label over".

Fuente

2009-12-15 23:50:35

En términos de los laicos:

Al centrarse en la entrada, si el valor es "nombre de usuario" y luego otra vez en ""
Al retirar el foco de la caja, si el valor es "" (es decir, se introdujo nada), colóquela en el "nombre de usuario" que todavía proporcionan información al usuario, ya que aún no se han introducido datos

el código:

<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" />

Fuente

2009-12-15 23:51:42

una forma más moderna es el uso de "comodín"

<input type="text" placeholder="search" />

Fuente

2014-08-01 17:24:01

¡Esto es elegante! – theblackpearl

Javascript "marcas de agua" para cuadros de texto

Respuesta

Cuestiones relacionadas