Ocultar textos con asteriscos CSS. Aprenderemos a ocultar los textos que digitamos en un input de tipo texto para cambiarlos a asteriscos u otros caracteres especiales.
¿Porque enmascarar textos con asteriscos?
generalmente los formularios de tipo LOGIN poseen 3 componentes:
- Usuario.- Se usa input de tipo Texto o Email
- Contraseña: Se usa un input de tipo PASSWORD
- Botón.- Se usa para enviar el formulario e iniciar sesión.
Hasta aquí todo bien, solo que la mayoría de navegadores web poseen una opción de guardar contraseña para un fácil inicio de sesión posterior.
Si, la PC o Laptop está en casa seria genial pero que sucede en el trabajo donde rotan personal y cada personal posee sus accesos y responsabilidades.
En estas ocasiones suelen ser un verdadero problema y viendo esa necesidad de usar otro método para enmascarar la contraseña con asteriscos y no se guarde en el navegador.
¿Como obtener type=text para que parezca type=password?
La solución es muy sencilla y lo vamos a hacer usando estilos CSS y usaremos un selector CSS llamado -webkit-text-security (o text-security) y se implementa de la siguiente manera:
input.mipw
{
-webkit-text-security: disc;
text-security: disc;
}El script anterior estamos aplicando ese método a la clase mipw que debemos de agregar al input que deseamos enmascarar.
Ahora veremos como declarar esa clase en el input.
<input type="text" class="mipw" value="mipassword">Recuerda que el input anterior posee una declaración de tipo texto y además hemos declarado la clase mipw. Por lo tanto, en vez de texto mostrara asteriscos.
Eso es todo, debemos de guardar el documento y apreciaremos los cambios.
Nota:
En los navegadores basados en WebKit, puede hacerlo utilizando la propiedad -webkit-text-security. Incluso te permite seleccionar la forma de las balas (disc, circle, square).
3 ejemplos de modificar un texto de un input a caracteres especiales.
Aquí les dejare un ejemplo completo donde pueden cambiar y/o enmascarar con tres tipos de caracteres especiales los inputs de tipo texto.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
input.mipw {
-webkit-text-security: disc;
text-security: disc;
}
input.mipw2 {
-webkit-text-security: circle;
text-security: circle;
}
input.mipw3 {
-webkit-text-security: square;
text-security: square;
}
</style>
</head>
<body>
<input type="text" class="mipw" value="secreto">
<input type="text" class="mipw2" value="secreto">
<input type="text" class="mipw3" value="secreto">
</body>
</html>
Caracteres Personalizados y externos para input de tipo texto
Podemos hacer una entrada de contraseña falsa con texto utilizando una fuente externa personalizada. Esta integración funciona en los siguientes navegadores: chrome, firefox, edge, etc.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
@font-face {
font-family: 'password';
font-style: normal;
font-weight: 400;
src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}
input.password {
font-family: 'password';
width: 180px; height: 16px;
}
</style>
</head>
<body>
<p>Mi contraseña: <input class="password" type="text" autocomplete="off" /></p>
</body>
</html>
Espero que esta explicación les ayude a resolver su búsqueda e inquietud.
