Simulate password type input when using contenteditable div

Question

I use contenteditable divs instead of input elements because they are more flexible when it comes to style in the input field. I'm just wondering if there is a way to make the input look like an input element with its type set to a password, for example:

<input type='password'> 

Hope this is clear enough. Thanks.

Answer 1

you will need to know the CSS settings for mozilla and co. in the browser, but in webkit it looks like this. also you need to add a keystroke 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 in any case, the password fields are just combined elements with element.innerHTML="yourpassword" and element.innerText="•••••••"

You can also do this using JavaScript and fill in innerText "•"

Answer 2

I came across this question as I tried to emulate an input password, but overlapping another div with • not an option for me, since I wanted it to work without JavaScript.
Then there is text-security: disc , but support is not enough at this point.

So, I created a font on FontStruct , in which all Latin characters (including diacritic ) look like • .

Here is the link to the file on Dropbox .

When using this, just add this to 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.

PS If the Dropbox link is not available and you downloaded it, feel free to replace the link. Otherwise just give this answer a comment

Answer 3

To get rid of the password, remember, I processed the password as an input field and “blurred” the entered text.

It is less "secure" than the field for your own password, since the choice of printed text will show it as clear text, but the password is not remembered. It also depends on Javascript activation.

 <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

Here is my solution. It is not perfect (it only processes extra / deleted characters at the end), but it is 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 get the password:

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