Caja de texto con indicaciones

[ionberges]

Hola estoy creando una web en php pero bueno como las cajas de texto son html lo pregunto aqui. Lo que queria saber es como se pone una caja de texto que ponga email por ejemplo y otra caja que aparezcan los tipicos puntos del password. El problema es que cuando el usuario quiera rellenar la caja del email desaparezca la palabra email y aparezca lo que esta escribiendo solamente. Del mismo modo deberian desaparecer los puntos al escribir la contraseña.

Gracias

[IsaBelM]

eso se hace con javascript, usando los evento onclick() (quitas el valor predeterminado) y onblur() (comprueba el nuevo valor)

[emprear]

correcto IsaBelM, más precisamente asi

Código HTML:

<input type="text" name="nombre" value="usuario" 
onclick="this.value='';" onfocus="this.select()" 
onblur="this.value=!this.value?'usuario':this.value;" />
<br />
<input type="password" name="clave" value="contraseña" 
onclick="this.value='';" onfocus="this.select()" 
onblur="this.value=!this.value?'contraseña':this.value;" />
 

Saludos

[IsaBelM]

Iniciado por emprear

correcto IsaBelM, más precisamente asi

sólo le dí indicaciones para que investigara por sí mismo. pero ya puesta, haría algunos cambios: no usaría el evento onfocus, ni la función select() y las expresiones y acciones de las condicionales las cambiaría un poco

<input type="text" name="nombre" value="usuario" onclick="this.value = this.value == this.defaultValue? '' : this.value;" onblur="this.value=!this.value? this.defaultValue : this.value;" />

[emprear]

Tu método y el mío, no hacen exactamente lo mismo

Mientras en el tuyo, si el usuario ingresó un valor erróneo, en el nombre supongamos, si vuelve el foco al campo, el valor permanece. Tendra que borrarlo manualmente para volver a ingresarlo.
En el mío, el valor se elimina y debe reescribirlo, en el campo nombre, puede que tan solo la correción de un caracter sea sufuciente, pero en el de contraseña, dado que el usuario solo ve asteriscos, va a ser más dificil determinar en que caracter de la cadena cometió el error.

Saludos

[IsaBelM]

los código han de ser lo mas dinámicos posibles, para así poder reutilizarlos. este código vale para cualquier campo de texto, con lo cual usando addEvent() de dom level 2 y sólo unas pocas líneas de código puede usar ese efecto en tantos campos como quieras

centrandome en el caso que ocupa. pongamos que el usuario está escribiendo la contraseña y nota que se ha equivocado. en el supuesto que expones tendría tres opciones:

• usar backspace
• usar la tecla tabulador para salir del campo y seguidamente posicionar de nuevo el cursor en el campo con el ratón
• coger el ratón, quitarle el foco al campo y volver a darselo

cual crees que es la opción mas usada??

[emprear]

Comportamientos por parte del usuario?
Tendría que hacer una encuesta.
Esto es una simple ayuda visual, acaso un pequeño de ahorro de espacio para algun form de login de dimensiones pequeñas. La mayoría de los que ingresan datos equivocados es porque no miran al escribir y recien toman nota del error cuando el formulario se valida. Son los que escriben, tab, escriben, enter...

El comportamiento, como ya indiqué, tiene una pequeña diferencia. que @ionberges saque sus conclusiones y evalue que le satisface mas

[IsaBelM]

Comportamientos por parte del usuario?
Tendría que hacer una encuesta.

no, no, dejalo, ya te lo digo yo; usarían backspace. los demás supuesto son ...... como decirlo, antinatura??

Esto es una simple ayuda visual, acaso un pequeño de ahorro de espacio para algun form de login de dimensiones pequeñas.

en ésta ocasión son dos controles, pero en otra ocasión puede que sean 50 o 100. y entonces la diferencia será sustancial

La mayoría de los que ingresan datos equivocados es porque no miran al escribir y recien toman nota del error cuando el formulario se valida. Son los que escriben, tab, escriben, enter...

el caso que ocupa no es al enviar los datos, sino mientras se están rellenando los controles. y habría que hacer otra encuesta para saber si el problema mas común de enviar datos erróneos es por pulsar las teclas tab, enter...
pero como tú dices

que @ionberges saque sus conclusiones y evalue que le satisface mas