Mostrar "Constraseña" en textbox password

Polkiko · #1 (**permalink**) 18/02/2012, 08:02

Hola,

Al intentar dar un valor al campo de contraseña, este se muestra con los puntitos
Coloco el siguiente código:

Código HTML:

<input name="pass" onblur="if(this.value=='') { this.value = 'Contraseña' }" onfocus="if(this.value=='Contraseña') { this.value = '' }" type="password" maxlength="20" value="Contraseña" />

Cuanda sale el textbox no me muestra la palabra "Contraseña" si no los puntios

¿Como soluciono eso?¿Debo de hacerlo mediante algun script?
Saludos y desde ya, gracias ;)

PD: Ya busqué información por el foro, pero lo que encontré no me funcionó

furoya · #2 (**permalink**) 18/02/2012, 10:54

Bueno, es obvio. Si estás en un input type=password el texto que pogas se va a ver como "bolitas", "estrellitas", o lo que tuvieren de reemplazo. Para que se vea con "letras" debería ser p.e. un input type=text.

Si quieres usar JS, puedes cambiar el type= con un escript dependiendo si hay metida una contraseña o tu texto informativo. Pero en realidad se hace poniendo una capa o una imagen de fondo que diga lo que quieras, y se desaparece la primera vez que ponen en foco el input.
Se puede ser más exquisito y volver a mostrar el cartel cuando reconozca que abandonaron el campo, pero es complicar un escript gratuitamente : si ya le escribieron algo, ya saben para qué sirve, no hay que andarlo repitiendo.

La otra forma es usar input type=password placeholder="Contraseña", pero es HTML5. No sé si andará en todos los navegadores. En los viejitos seguro que no.

Polkiko · #3 (**permalink**) 18/02/2012, 13:33

Me sirvió lo de "placeholder" pero no funcionará con todos los navegadores :(
En google chrome ultima version si se ve bien y en mozilla ultima versión tambien
Saludos y mil gracias!

furoya · #4 (**permalink**) 19/02/2012, 21:57

¿Sabes que ni hace falta JS?. El único que dicen que aún no lo reconoce es IE (al menos hasta la versión 9), así que con un conditional comment nos arreglaríamos para meterle la imagen.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#pw {width: 180px; height: 27px; background-color: #ccccff; font-size: 22px; font-weight: bold;}
</style>
</head>
<body>

<!--[if IE]>
<style type="text/css">
#pw {background-image: url(http://static.forosdelweb.com/fdwtheme/2010/home.png); background-position:-140px 0;}
</style>
<![endif]-->

<input type=password placeholder="Foros del Web" id="pw">

</body>
</html>

En IE6 el color de fondo no se ve porque la imagen es *.png con alpha channel, y por supuesto, no le interpreta la transparencia.

Como dato adicional: está previsto darle formato CSS al texto marcador. Por ahora lo soportan (mal) algunos navegadores.

emprear · #5 (**permalink**) 20/02/2012, 00:21

Exacto, y confirmo que IE10 si soporta placeholder

Saludos

furoya · #6 (**permalink**) 20/02/2012, 06:03

Gracias

.

(¿Recién salió el "9" y ya están probando el "10"?; ¿qué pasó con la época en que liberaban versiones cada mil años?)

Bien, entonces creo que vamos a tener que cambiar el comentario condicional por

Código:

<!--[if lt IE 10.0000]> 
#pw {background-position:-140px 0;
background-image: url(http://static.forosdelweb.com/fdwtheme/2010/home.png); }
<![endif]-->

Encontré esta página para el CSS

http://vagabundia.blogspot.com/2012/...aceholder.html

y, por supuesto

http://dev.w3.org/html5/spec/Overvie...ut-placeholder