Comment masquer et afficher les mots de passe en HTML

Comment masquer et afficher les mots de passe en HTML : écrivez d'abord les balises de l'interface HTML et les styles css ; puis modifiez directement "type=text" et "type=password" pour afficher et masquer la zone de saisie du mot de passe.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Comment masquer et afficher les mots de passe en HTML ?

Mise en œuvre de l'affichage du texte et du masquage de la zone de saisie du mot de passe dans le formulaire HTML5

Description du problème et idées

Le type de mot de passe de la zone de saisie du mot de passe en HTML5 Le formulaire peut masquer le contenu saisi par l'utilisateur, mais il est parfois utilisé pour permettre à l'utilisateur d'afficher ou de masquer librement le contenu de la zone de saisie : pour implémenter cette fonction, la première chose qui vient à l'esprit est d'utiliser js pour dynamiquement changez le type de saisie, c'est-à-dire type = mot de passe en type = texte caché Le mot de passe sera affiché, mais en fait il ne peut pas être réalisé et n'a aucun effet, je ne peux donc que changer d'avis :

[ Mise à jour : le dernier paramètre de type a pris effet, vous pouvez modifier directement type=text et type=password Pour afficher et masquer la zone de saisie du mot de passe, le code mis à jour est affiché ci-dessous. Veuillez abandonner la méthode d'origine]

Mettez. deux entrées, l'une est un mot de passe et l'autre est du texte, pour surveiller conjointement l'événement d'entrée de l'utilisateur. Chaque fois que l'utilisateur Pour ce commutateur, nous utilisons js pour contrôler l'affichage et le masquage des deux entrées afin d'obtenir cet effet.

Étapes de mise en œuvre :

Écrivez d'abord les balises de l'interface HTML et le style css (la saisie du texte est masquée en premier : style =" display:none", les opérations d'affichage et de masquage ultérieures sont également implémentées en modifiant l'attribut display)

CSS:

<style type="text/css">
body{
margin:0px;  
background-color: white; 
font-family: &#39;PT Sans&#39;, Helvetica, Arial, sans-serif;  
text-align: center;  
color: #A6A6A6;  
}
/*输入框样式，去掉背景阴影模仿原生应用的输入框*/
input{
width: 100%;  
height: 50px;  
border:none;  
padding-left:3px;  
font-size: 18px;  
}
input:focus {  
    outline: none;  
}
/*显示隐藏密码图片*/
img{
width: 40px;
height: 25px;
position: absolute;  
right: 0px; 
margin: 15px;  
}
/*登录按钮*/
button{  
    width: 200px;  
    height: 50px;  
    margin-top: 25px;  
    background: #1E90FF;  
    border-radius: 10px;  
    border:none;
    font-size: 18px;
    font-weight: 700;  
    color: #fff;
}
button:hover {
background: #79A84B;  
outline: 0;
}
/*输入框底部半透明横线*/
.input_block {
border-bottom: 1px solid rgba(0,0,0,.1);
}
/*container*/
#page_container{
margin: 50px;
}
</style>

HTML:

<div id="page_container">
<!--暗文密码输入框-->
<div class="input_block" id="psw_invisible">
<img  src="/static/imghwm/default1.png"  data-src="visible.png"  class="lazy"  id="visible" οnclick="showPsw()"  alt="Comment masquer et afficher les mots de passe en HTML" >
<input type="password" id="input_invisible" placeholder="Password"/>
</div>
<!--明文密码输入框-->
<div class="input_block" id="psw_visible" style="display: none;">
<img  src="/static/imghwm/default1.png"  data-src="invisible.png"  class="lazy"  id="invisible" οnclick="hidePsw()"  alt="Comment masquer et afficher les mots de passe en HTML" >
<input type="text" id="input_visible" placeholder="Password"/>
</div>
 
<button οnclick="">Login</button>
</div>

Ensuite, utilisez JS pour implémenter Alternate fonctionnement des événements de clic : le mot de passe est masqué dans un premier temps, cliquez sur le petit œil à l'arrière pour afficher le mot de passe, c'est-à-dire que la saisie du mot de passe est masquée et la saisie du texte est affichée en même temps, faites attention à passer le mot de passe. valeur du mot de passe au texte, et vice versa. Voici une leçon :

JS:

<script type="text/javascript">
// 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
var visible=document.getElementById(&#39;psw_visible&#39;);//text block
var invisible=document.getElementById(&#39;psw_invisible&#39;);//password block
var inputVisible = document.getElementById(&#39;input_visible&#39;);
var inputInVisible = document.getElementById(&#39;input_invisible&#39;);
    //隐藏text block，显示password block
function showPsw(){
var val = inputInVisible.value;//将password的值传给text
inputVisible.value = val;
invisible.style.display = "none";  
visible.style.display = "";  
}
    //隐藏password，显示text  
    function hidePsw(){
   var val=inputVisible.value;//将text的值传给password  
inputInVisible.value = val; 
invisible.style.display = "";  
    visible.style.display = "none";  
}
</script>

Le code mis à jour est le suivant :

HTML:

<div id="page_container">
<!--密码输入框-->
<div class="input_block">
<img  src="/static/imghwm/default1.png"  data-src="visible.png"  class="lazy"  id="demo_img" οnclick="hideShowPsw()"  alt="Comment masquer et afficher les mots de passe en HTML" >
<input type="password" id="demo_input" placeholder="Password"/>
</div>
 
<button οnclick="">Login</button>
</div>

JS :

<script type="text/javascript">
// 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
var demoImg = document.getElementById("demo_img");
var demoInput = document.getElementById("demo_input");
    //隐藏text block，显示password block
function hideShowPsw(){
if (demoInput.type == "password") {
demoInput.type = "text";
demo_img.src = "invisible.png";
}else {
demoInput.type = "password";
demo_img.src = "visible.png";
}
}
</script>

Démo C'était à l'origine gratuit, mais le système l'a peut-être augmenté à 10 points à mesure que de plus en plus de personnes se sont inscrites. Voici une adresse de téléchargement de démo github. Si vous n'avez pas de points, vous pouvez. téléchargez-le gratuitement ici :

https://github.com /jiangxh1992/HTML5InputDemo

[Apprentissage recommandé :

tutoriel vidéo HTML]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!