HTML: atributo HTML5 marcador de posición en el campo de la contraseña emisión- muestra de texto normal?

Question

estoy haciendo un formulario de acceso, en la que hay dos campos-

simplificado:

<input type="text"> 
<input type="password" placeholder="1234567" > 

En mis pruebas (FF, Chrome) placeholer la muestra de texto gris. ¿Cómo puedo tener el texto de marcador de posición en la contraseña 'puntos'? y tienen el apoyo de marcador de posición en el IE?

por ejemplo. el usuario ve una contraseña gris falso, no el texto 1233467.

(tengo jQuery disponible)

Gracias mucho,

Harley

EDIT: Parece que este es el mal forma de usar el marcador de posición. Sin embargo, ¿cómo puedo obtener soporte de IE? Gracias

Answer 1

intente utilizar el código de puntos contraseña en el marcador de posición así:

placeholder="●●●●●" 

Para soporte en IE, consulte otros hilos como Showing Placeholder text for password field in IE o placeholder works for text but not password box in IE/Firefox using this javascript

Answer 2

A pesar de que estoy en contra de esto desde un punto de vista UX, que proporcionará una respuesta para esto.

En lugar de utilizar el atributo HTML5 placeholder, utilice value en su lugar.

<input type="password" value="1234567"> 

Luego, el focus, sustituya el value con una cadena vacía.

var inputs = document.getElementsByTagName('input'), 
    i = 0; 
for (i = inputs.length; i--;) { 
    listenerForI(i); 
} 

function listenerForI(i) { 
    var input = inputs[i], 
     type = input.getAttribute('type'), 
     val = input.value; 
    if (type === 'password') { 
    input.addEventListener('focus', function() { 
     if (input.value === val) input.value = ''; 
    }); 
    input.addEventListener('blur', function() { 
     if (input.value === '') input.value = val; 
    }); 
    } 
} 

Quiero reiterar que NO recomiendo este enfoque, pero esto hará lo que esté buscando.

EDIT:

Por favor, visite esta página que imitar placeholder funcionalidad si no se apoya en su navegador usando jQuery: http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

Answer 3

Para responder a su pregunta actualizada,

Estoy construyendo fuera de la respuesta dada en this hilo.

envolver su forma en un elemento span. Luego puede agregar una etiqueta como marcador de posición en el campo de contraseña. Finalmente, para eliminar la etiqueta cuando se ingresa una contraseña, agréguela presionando la tecla del campo de contraseña y elimine el texto de la etiqueta. Este es un ejemplo del código, es probable que desee cambiar los identificadores:

<span style="position: relative;"> 
<input id="password" type="password" placeholder="Password" > 
<label id="placeholder" style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="password">Password</label> 
</span> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#password').keypress(function(){ 
      $('#placeholder').html(""); 
     }); 
    }); 
</script>