Imitar una entrada de tipo contraseña mientras usa un div contennteitable

Estoy usando divs contennteditable en lugar de elementos de entrada, porque son más flexibles cuando se trata de diseñar dentro del cuadro de entrada. Me pregunto si hay una manera de hacer que la entrada se vea como un elemento de entrada con su tipo establecido en contraseña, así:

 

Espero que eso sea lo suficientemente claro. Gracias.

Tendrás que averiguar la configuración de CSS específica del navegador para mozilla y compañía … pero en webkit se ve así. también necesita agregar el controlador de pulsaciones de teclas a través de javascript para ello.

  
yourpassword

pero de todos modos, los campos de contraseña son solo elementos combinados con element.innerHTML="yourpassword" y element.innerText="•••••••"

También puedes hacer esto con javascript y rellenar innerText con "•"

Me encontré con esta pregunta porque también estaba tratando de imitar una entrada de contraseña, pero la superposición de otro div con s no era una opción para mí, ya que también quería que funcionara sin JavaScript.
Luego está text-security: disc de text-security: disc , pero no hay suficiente soporte para eso a partir de este momento.

Entonces, lo que he hecho es crear una fuente en FontStruct en la que todos los caracteres latinos (incluidos los diacríticos ) se vean como un .

Aquí hay un enlace al archivo en mi Dropbox .

Cuando uses esto, solo agrega esto en tu archivo css

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

Luego, para usarlo, simplemente aplique font-family: 'password' a su elemento.

PD: si el enlace de Dropbox está inactivo y la descarga, siéntase libre de reemplazar el enlace. De lo contrario, solo dale a esta respuesta un comentario

Para deshacerse de la contraseña, recuerde que traté la contraseña como campo de entrada y “desenfoque” el texto escrito.

Es menos “seguro” que un campo de contraseña nativo ya que al seleccionar el texto escrito se mostrará como texto claro, pero no se recuerda la contraseña. También depende de tener Javascript activado.

  

Aquí está mi solución. No es perfecto (solo maneja caracteres adicionales / eliminados al final), pero es bastante corto:

html:

  

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 para recuperar la contraseña:

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