Imitate a password-type input while using a contenteditable div

Question

I'm using contenteditable divs instead of input elements, because they are more flexible when it comes to styling within the input box. I'm just wondering if there's a way to make the input look like an input element with its type set to password, like so:

<input type='password'>

I hope that is clear enough. Thanks.

Answer 1

you will have to find out the browser specific CSS settings for mozilla and co.. but in webkit it looks like this. also you need to add the keypress handler via javascript for it.

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

but anyway, password fields are just combined elements with element.innerHTML="yourpassword" and element.innerText="•••••••"

you could do this with javascript too and fill innerText with "•"

Answer 2

I came across this question as I was trying to imitate a password input as well, but overlaying another div with •s wasn't an option for me, since I wanted it to work without JavaScript, too.
Then there's text-security: disc, but there isn't enough support for that as of this moment.

So what I've done is create a font on FontStruct in which all Latin characters (including the diacritic ones) look like a •.

Here is a link to the file on my Dropbox.

When using this, just add this in your css file

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

Then to use it, simply apply font-family: 'password' to your element.

P.S. If the Dropbox link is down and you happen to have it downloaded, feel free to replace the link. Otherwise just give this answer a comment