Cambiando los símbolos mostrados de un campo de contraseña HTML

26

No puede cambiar el carácter de enmascaramiento de contraseña en el campo de contraseña estándar. Puede falsificarlo con un cuadro de texto, pero lo convierte en un modelo de seguridad débil porque no obtiene la protección que tiene del cuadro de texto de la contraseña. Como nota al margen, generalmente no es una buena idea cambiar el comportamiento de elementos como este porque los usuarios se han acostumbrado a una forma de enmascaramiento, y presentarán una diferente; si no hay una buena razón para hacer esto, yo ' D evitarlo.

Fuente

2009-10-30 08:57:08

+0

¿Cómo puedo fingir con el cuadro de texto, sin embargo no estoy utilizando esta característica de contraseña, por favor verifica la cuestión http://stackoverflow.com/questions/31604402/replace-text-with-stars-in-html-without-javascript? Noredirect = 1 # comment51159417_31604402 –

3

No: el agente de usuario elige su propio estilo predeterminado, y no hay (que yo sepa) atributos de CSS que pueda cambiar para determinar el carácter de enmascaramiento.

Por supuesto, esto sería posible si el campo de contraseña fuera solo un campo de texto estándar y enmascarara manualmente la entrada con un controlador de eventos javascript (onKeyPress, probablemente). Incluso podría declarar el campo como type="password" en el HTML, luego hacer que su función JS modifique el DOM para cambiar su tipo. Aunque sería un poco cauteloso al hacer esto; la implementación del navegador es casi seguro bastante sólida, y burlar la funcionalidad de seguridad establecida para implementar la suya rara vez es una buena idea.

Fuente

2009-10-30 08:59:28

+6

¿Funcionalidad de seguridad establecida? Los campos de entrada de contraseña y de texto en HTML son casi lo mismo, solo cambia la UI, con el enmascaramiento en los campos de contraseña. No estoy rechazando su respuesta, pero esto no es como reinventar la rueda o crear un motor criptográfico homebrew, solo está parcheando un elemento de IU para que cumpla con sus gustos. – Spidey

+1

@Spidey, además del enmascaramiento de caracteres, los campos de contraseña también impiden copiar el contenido de ellos, dependiendo del navegador y del sistema operativo. –

+1

@MicahHenning Gracias por señalar esto. De todos modos, incluso si el usuario intenta copiar desde el cuadro de texto personalizado, todo lo que obtendría serían asteriscos o puntos o cualquier otro símbolo que elija para enmascarar la contraseña real. – Spidey

1

A partir de ahora, parece que esto es posible en los navegadores webkit. Consulte http://help.dottoro.com/lcbkewgt.php para obtener ejemplos y documentación.

no se aplica a la entrada de contraseña

<input type="text" style="-webkit-text-security: square;" />

No hay una buena solución para otros navegadores como cuando esta respuesta fue escrito e incluso en los navegadores WebKit, los caracteres que están permitido especificar son muy limitados.

Fuente

2016-01-03 16:57:28 www139

+4

Esto no funciona. Lo probé en 4 navegadores diferentes. –

+0

Actualizado. Gracias @OleHaugset. – www139

14

Crea tu propia fuente y usa @font-face y font-family (y font-size) para input[type="password"]. Debería ayudar a resolver su problema. Pero ... debe crear una fuente con una viñeta reemplazada y un carácter de asterisco. Todos los números de caracteres en la fuente pueden representar el mismo personaje. Usa google para encontrar un programa gratuito para editar fuentes vectoriales.

Nunca diga "es imposible". Debería encontrar un truco para su problema.

Caracteres que se reemplazarán con su símbolo (para Chrome, Firefox y MSIE): 26AB, 25E6, 25CF, 25D8, 25D9, 2219, 20F0, 2022, 2024, 00B7, 002A.

(18C)

Fuente

2017-07-24 16:32:42 18C

+1

¿Tiene una fuente de ejemplo para compartir? – camolin3

+0

esta debería ser la respuesta perfecta ... Gracias, hombre ... resolvió mi problema –

+1

@waLLe: mujer no hombre ... La gente rara vez piensa en un comportamiento abstracto y multinivel. Por cierto. la pregunta es vieja (2009) pero aún está activa. En el pasado, '@ font-face' no estaba definido. En 2009 no fue posible, pero ... la gente repite la respuesta a pesar de que Firefox lo soporta desde v3.5, IE probablemente desde v6, Chrome desde v4. Pero aún así ... Opera Mini no es compatible. Cuando escribí mi respuesta, la respuesta principal tiene +21 puntos. – 18C

0

<input type="text" style="-webkit-text-security: circle;" />

Fuente

2018-02-28 03:07:19

+1

La propiedad CSS '-webkit-text-security' no funcionará en IE, Firefox u Opera. – sorak

Cambiando los símbolos mostrados de un campo de contraseña HTML

Respuesta

Cuestiones relacionadas