imitare un inserimento della password di tipo mentre si utilizza un div contenteditable

Question

sto usando div contentEditable invece di elementi di input, perché sono più flessibili quando si tratta di styling all'interno della casella di input. Mi chiedo solo se c'è un modo per rendere l'aspetto di ingresso come un elemento di input con il suo tipo impostato la password, in questo modo:

<input type='password'> 

Spero che sia abbastanza chiaro. Grazie.

Answer 1

si dovrà scoprire le impostazioni del browser CSS specifiche per Mozilla e co .. ma in WebKit sembra che questo. inoltre è necessario aggiungere il gestore della tastiera tramite javascript.

<style> 
#password { 
    -webkit-text-security: disc; 
    height:20px; width:100px; 
    -webkit-appearance: textfield; 
    padding: 1px; 
    background-color: white; 
    border: 2px inset; 
    -webkit-user-select: text; 
    cursor: auto; 
} 
</style> 
<div id="password" contenteditable="true">yourpassword</div> 
<script> 
    //you could use javascript to do nice stuff 
    var fakepassw=document.getElementById('password'); 
    //fakepassw.contentEditable="true"; 
    fakepassw.addEventListener('focus',function(e){ /*yourcode*/ },false); 
    fakepassw.addEventListener('keyup',function(e){ console.log(e.keyCode) },false); 
</script> 

ma in ogni caso, i campi di password sono solo elementi con element.innerHTML="yourpassword" e element.innerText="•••••••"

che si potrebbe fare questo con javascript troppo e riempire innerText con "•"

Answer 2

combinati mi sono imbattuto in questa domanda come stavo cercando di imitare anche una password, ma sovrapporre un altro div con • s non era un'opzione per me, dal momento che volevo che funzionasse anche senza JavaScript.
Quindi c'è text-security: disc, ma non c'è abbastanza supporto per questo al momento.

Quindi quello che ho fatto è creare un font su FontStruct in cui tutti i caratteri latini (compresi quelli diacritic) assomigliano a uno •.

Ecco un link al file sul mio Dropbox.

Quando si utilizza questo, basta aggiungere questo nel vostro file CSS

@font-face { 
    font-family: 'password'; 
    src: url('../font/password.woff2') format('woff2'), 
     url('../font/password.woff') format('woff'), 
     url('../font/password.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Poi per usarlo, è sufficiente applicare font-family: 'password' al vostro elemento.

P.S. Se il link Dropbox non funziona e ti è capitato di scaricarlo, sentiti libero di sostituire il link. In caso contrario, solo dare questa risposta un commento

Answer 3

per sbarazzarsi di password di ricordare, ho trattato la password come campo di input, e "sfocatura" il testo digitato.

E 'meno "sicuro" di un campo password nativa in quanto la selezione del testo digitato mostrerebbe come testo chiaro, ma la password non viene ricordato. Dipende anche dall'avere attivato Javascript.

<input style="background-color: rgb(239, 179, 196); color: black; text-shadow: none;" name="password" size="10" maxlength="30" onfocus="this.value='';this.style.color='black'; this.style.textShadow='none';" onkeypress="this.style.color='transparent'; this.style.textShadow='1px 1px 6px green';" autocomplete="off" type="text"> 

Answer 4

Ecco la mia soluzione. Non è perfetto (che gestisce solo i caratteri aggiuntivi/cancellati alla fine), ma è piuttosto breve:

html:

<input id="my_id" type="text" oninput="input_to_bullets (this)" onfocus="this.value = ''; this.input_pw = '';" autocomplete="off" /> 

JavaScript:

function input_to_bullets (el) { 
    if (! el.input_pw) { 
     el.input_pw = ''; 
    } 
    var val = el.value; 
    var len = val.length; 
    var chr = val.substr (len - 1); 
    if (chr != "•") { 
     el.input_pw += chr; 
    } else { 
     el.input_pw = el.input_pw.substr (0, len); 
    } 
    el.value = el.value.replace (/./g, "•"); 
} 

JavaScript per recuperare la password:

var password = document.getElementById ('my_id').input_pw;