Portada » HTML5 Demostración y Ejemplos » Ocultar textos con asteriscos CSS

Ocultar textos con asteriscos CSS

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.

Ocultar textos con asteriscos CSS
Ocultar textos con asteriscos CSS

¿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>
input de texto enmascarado
input de texto enmascarado

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>

Contraseña con CSS enmascarado

Espero que esta explicación les ayude a resolver su búsqueda e inquietud.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad