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

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="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 to retrieve password:

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