HTML: attributo segnaposto HTML5 nel problema del campo password: mostra il testo normale?

Question

Sto creando un form di login, in cui ci sono due settori-

semplificato:

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

Nel mio test (FF, Chrome) il placeholer mostra testo grigio. Come posso avere il testo segnaposto in "punti" password? E avere il supporto segnaposto in IE?

ad es. l'utente vede una password grigia falso, non il testo 1233467.

(ho jquery disponibili)

Grazie molto,

Harley

EDIT: Sembra che questo è il male modo di usare segnaposto. Tuttavia, come posso ottenere supporto IE? Grazie

Answer 1

provare a utilizzare il codice di dot password nel segnaposto in questo modo:

placeholder="●●●●●" 

Per supporto in IE fare riferimento ad altri thread come 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

Anche se sono controverso da un punto di vista UX, fornirò una risposta per questo.

Invece di utilizzare l'attributo HTML5 placeholder, utilizzare invece value.

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

Poi focus, sostituire il value con una stringa vuota.

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; 
    }); 
    } 
} 

Voglio ribadire che io non consiglio questo approccio, ma questo farà quello che stai cercando.

EDIT:

Visita questa pagina che imitare placeholder funzionalità se non è supportata dal browser utilizzando jQuery: http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

Answer 3

Per rispondere alla tua domanda aggiornato,

Sto costruendo al largo della risposta data in this thread.

Avvolgere il modulo in un elemento di span. Quindi puoi aggiungere un'etichetta come segnaposto nel campo della password. Infine, per rimuovere l'etichetta quando viene digitata una password, eseguire il binding sulla pressione del tasto del campo password e rimuovere il testo dall'etichetta. Ecco un esempio del codice, probabilmente si desidera modificare gli ID:

<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>