Foros del Web » Creando para Internet » HTML »

Caja de texto con indicaciones

Estas en el tema de Caja de texto con indicaciones en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/07/2011, 14:04
 
Fecha de Ingreso: julio-2011
Mensajes: 7
Antigüedad: 6 años, 2 meses
Puntos: 0
Caja de texto con indicaciones

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
  #2 (permalink)  
Antiguo 30/07/2011, 14:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 3 meses
Puntos: 1010
Respuesta: Caja de texto con indicaciones

eso se hace con javascript, usando los evento onclick() (quitas el valor predeterminado) y onblur() (comprueba el nuevo valor)
  #3 (permalink)  
Antiguo 30/07/2011, 23:47
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 2 meses
Puntos: 1567
Respuesta: Caja de texto con indicaciones

correcto IsaBelM, más precisamente asi

Código HTML:
Ver original
  1. <input type="text" name="nombre" value="usuario"
  2. onclick="this.value='';" onfocus="this.select()"
  3. onblur="this.value=!this.value?'usuario':this.value;" />
  4. <br />
  5. <input type="password" name="clave" value="contraseña"
  6. onclick="this.value='';" onfocus="this.select()"
  7. onblur="this.value=!this.value?'contraseña':this.value;" />

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 31/07/2011, 13:50
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 3 meses
Puntos: 1010
Respuesta: Caja de texto con indicaciones

Cita:
Iniciado por emprear Ver Mensaje
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
Cita:
<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;" />
  #5 (permalink)  
Antiguo 31/07/2011, 14:43
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 2 meses
Puntos: 1567
Respuesta: Caja de texto con indicaciones

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 31/07/2011, 15:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 3 meses
Puntos: 1010
Respuesta: Caja de texto con indicaciones

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??
  #7 (permalink)  
Antiguo 31/07/2011, 15:49
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 2 meses
Puntos: 1567
Respuesta: Caja de texto con indicaciones

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


__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 31/07/2011, 16:20
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 3 meses
Puntos: 1010
Respuesta: Caja de texto con indicaciones

Cita:
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??
Cita:
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
Cita:
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
Cita:
que @ionberges saque sus conclusiones y evalue que le satisface mas

Etiquetas: caja, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:03.