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.

Eva

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

Valval

Thanks for the reply, but I figured it out already. I just made the text color match the background color within the contenteditable div and aligned a new div on top of the editable div that I modified every keyup with • * totalCharacters, using jQuery. – Eva

Any idea around the css settings needed for Mozilla? – Cubical

How to handle input elements instead of divs? – Apothecium

Answer 2

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

Contraption

Absolutely not. – Contraption

This solution is even dangerous, because a stranger can just copy and paste the contents of the textfield and has the real password comfortable at hand. So this is more a graphical illusion to be safe. In source code the password is in a bad case even readable by injected code. – Valval

Any stranger or injected code can swap type="password" for type="text" anyway – Contraption

The swap is not possible if the password holding element does not have type attributes, you could use a div element instead. Have seen solutions where the input type="password" is placed in the tree only to mislead injects. – Valval

Using a div instead of an input was the whole idea from the beginning. Actually leaving in an input element with type="password" is a pretty good addition, though! – Contraption

Very ingenious! Thanks! To the sceptics: a normal input type=password field is also only graphical illusion. - You can get the value with script. If you leave your desktop with a password field filled in, it is easy to get the value via the console. So this solution is not any more unsafe than a regular password field. TO make sure that the font is ready immediately: use data url instead (#35120717) – Orest

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

Simile

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>

Gates

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;

Megavolt