usuario - poner asteriscos contraseña html

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

Question

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 la contraseña, así:

<input type=''password''>

Espero que eso sea lo suficientemente claro. Gracias.

Answer 1

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.

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

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

Answer 2

Me encontré con esta pregunta porque también estaba tratando de imitar una entrada de contraseña, pero superponer otra div con • s no era una opción para mí, ya que quería que funcionara también 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

Answer 3

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.

<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

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

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

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