html - pattern - Obtenga input type=text para que se parezca a type=password

mostrar contraseña html

Question

tl; dr

Tengo una entrada con type=text que quiero mostrar las estrellas como una entrada con type=password usando solo CSS.

Básicamente tengo un formulario con la siguiente entrada:

<input type=''text'' value=''hello'' id=''cake'' />

No estoy generando el formulario, no tengo acceso a su HTML en absoluto. Sin embargo, tengo acceso a CSS aplicado a la página.

Lo que me gustaría es que se comporte como type=password , es decir, que muestre las estrellas por lo que el usuario escribió en lugar del texto que se está escribiendo. Básicamente, me gustaría que ese aspecto (la presentación de la entrada del usuario) se vea como un campo type=password .

Dado que esto parece ser un problema de presentación única, pensé que tiene que haber una manera de hacer esto con CSS ya que está en su dominio de responsabilidad. Sin embargo - no he encontrado tal manera. Tengo que ser compatible con IE8 + pero prefiero tener una solución que funcione para los navegadores modernos solo en lugar de ninguna solución. Puntos extra para evitar la funcionalidad de copiar / pegar, pero puedo vivir sin eso.

Nota: en caso de que no quede claro, no puedo agregar HTML o JavaScript a la página, solo CSS.

(Lo único que he encontrado es esta pregunta, pero se trata de un problema relacionado con jQuery y tiene una solución de JavaScript)

Answer 1

Básicamente puedes hacer

input { -webkit-text-security: disc; }

dentro de su archivo css.

Pero cuidado , alguien podría simplemente " inspeccionar el elemento " en Chrome y cambiar el elemento css de "disco" a "ninguno" y el texto real se vería claro como día.

En cuanto a la desactivación de selección / copia, consulte esta publicación: ¿Cómo desactivar el resaltado de selección de texto usando CSS?

Answer 2

Bueno, como sugirió @ThiefMaster

input.pw {
    -webkit-text-security: disc;
}

Sin embargo, esto funcionará en los navegadores que son descendientes de webkit. Opera, Chrome y Safari, pero no son muy compatibles con el resto, otra solución para esto es utilizar webfonts.

Use cualquier utilidad de edición de fuentes como FontForge para crear una fuente con todos los caracteres que sean * (o cualquier símbolo que desee). Luego use las fuentes web CSS para usarlas como una fuente personalizada.

Answer 3

En los navegadores basados ​​en WebKit, puede hacerlo utilizando la -webkit-text-security . Incluso le permite seleccionar la forma de las viñetas (disco, círculo, cuadrado).

input.pw {
    -webkit-text-security: disc;
}

Demostración: http://jsfiddle.net/ThiefMaster/6uJJw/1/

Sin embargo, esto es aparentemente no estándar. Al menos los documentos de Safari CSS dicen que es una "Extensión de Apple". Funciona bien en Chrome, obviamente, pero no creo que ningún otro motor de procesamiento lo admita ...

Answer 4

Esto funciona solo para el campo de text (:

input { -webkit-text-security: none; } 
input { -webkit-text-security: circle; } 
input { -webkit-text-security: square; } 
input { -webkit-text-security: disc; /* Default */ }

Answer 5

Puedes crear una fuente hecha solo de puntos

@font-face
    {
    font-family:''dotsfont'';
    src:url(''dotsfont.eot'');
    src:url(''dotsfont.eot?#iefix'')  format(''embedded-opentype''),
        url(''dotsfont.svg#font'')    format(''svg''),
        url(''dotsfont.woff'')        format(''woff''),
        url(''dotsfont.ttf'')         format(''truetype'');
    font-weight:normal;
    font-style:normal;
}

input.myclass
    {-webkit-text-security:disc;font-family:dotsfont;}

Esto podría ser lo que estás buscando ...

Hay muchos glifos para definir pero podría haber una forma más sencilla de hacerlo. Puede crear una fuente totalmente vacía y definir solo el glifo .notdef ( glifo ID 0 ) que se usa como reemplazo cuando no se define otro glifo.

Como probablemente sepas, generalmente se ve así:

Por lo tanto, debe reemplazarlo con un punto / asterisco y probar lo que sucede con los navegadores ... porque no estoy seguro de si funciona en todos ellos (algunos pueden querer usar su propio reemplazo de glifo faltante). Déjame saber si lo intentas ...

HTH

Answer 6

Si desea evitar la funcionalidad de copiar y pegar, puede usar:

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none;

lo que no permitirá que otros seleccionen el texto y, por lo tanto, no podrán copiarlo.