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

As of last month, there is near-full support for text-security: disc (only FF mobile lacks behind as of this edit). I recommend considering Ol Sen's answer below first.

I found myself trying to imitate a password input, but overlaying another div with discs (•) wasn't an option for me, since I needed it to work without JavaScript. I would have used text-security: disc, but there isn't enough support for that at the moment.

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

Here is a link to the file on my Dropbox.

Just like regular fonts, you can use it like so:

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

[contentEditable].password {
  font-family: 'password';
}

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

Answer 2

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 3

To get rid of password remember, I treated the password as input field, and "blur" the text typed.

It is less "safe" than a native password field since selecting the typed text would show it as clear text, but password is not remembered. It also depends on having Javascript activated.

<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

The edit queue for @Ol Sen's answer was full. Here's the runnable code snippet.

Note the JavaScript is completely optional. This is really a CSS-only solution for browsers that support -webkit-text-security.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

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

#password {
  -webkit-text-security: disc;
  /* all styles below this line are optional */
  height: 20px;
  width: 100px;
  -webkit-appearance: textfield;
  padding: 1px;
  background-color: white;
  border: 2px inset;
  -webkit-user-select: text;
  cursor: auto;
}

<div id="password" contenteditable="true">yourpassword</div>

Answer 5

Here's my solution. It's not perfect (it only handles additional/deleted characters at end), but it's pretty short:

html:

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

JavaScript:

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

JavaScript to retrieve password:

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