type - Cambiar los símbolos que se muestran de un campo de contraseña HTML

poner asteriscos contraseña html

Question

¿Hay alguna forma de cambiar los asteriscos ( * ), o en algunos navegadores, una viñeta ( • ), que aparece en los campos de contraseña en HTML?

Answer 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 a partir de cuando se escribió esta respuesta e incluso en los navegadores webkit, los caracteres que se les permite especificar son muy limitados.

Answer 2

Cree su propia fuente y use @font-face y font-family (y font-size ) para la 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ías encontrar un truco para tu problema.

Caracteres a ser reemplazados con su símbolo (para Chrome, Firefox y MSIE): 26AB, 25E6, 25CF, 25D8, ​​25D9, 2219, 20F0, 2022, 2024, 00B7, 002A.

(18C)

Answer 3

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.

Answer 4

No, el agente de usuario elige su propio estilo predeterminado y, según mi conocimiento, no tiene 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 usted 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 haga 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.

Answer 5

Sé que es una pregunta muy antigua, pero me enfrenté a este problema hoy, y lo resolví usando este enfoque: https://github.com/Mottie/input-password-bullet

Básicamente, creé una nueva fuente donde se asigna el punto predeterminado, a otro ícono. Entonces, solo necesita importar los archivos de fuente al proyecto y agregar un css similar a este:

@font-face {
    font-family: ''fontello'';
    src: url(''/fonts/fontello.eot'');
    src: url(''/fonts/fontello.eot'') format(''embedded-opentype''),
    url(''/fonts/fontello.woff'') format(''woff''),
    url(''/fonts/fontello.ttf'') format(''truetype''),
    url(''/fonts/fontello.svg'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    color: red;
    font-size: 16px;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

    /* add spacing to better separate each image */
    letter-spacing: 2px;
}

¡Espero que esto ayude!

Answer 6

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