recherche

Maison >interface Web >js tutoriel >Comment utiliser JavaScript pour saisir des invites dans la zone de texte (zone de mot de passe)_compétences javascript

Comment utiliser JavaScript pour saisir des invites dans la zone de texte (zone de mot de passe)_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:23:221653parcourir

Parfois, nous avons besoin d'un langage d'invite dans le formulaire de connexion, tel que « Veuillez saisir le nom d'utilisateur » et « Veuillez saisir le mot de passe ». Quant au nom d'utilisateur, il est facile à dire, mais dans la zone du mot de passe, la langue est indiquée. comme "Veuillez saisir le mot de passe" apparaît. C'est un peu gênant, car le contenu saisi dans la zone du mot de passe ne sera pas affiché en code clair. Si l'attribut type est contrôlé dynamiquement, il y aura des problèmes de compatibilité. Si l'entrée existe déjà dans la page, l'attribut type est en lecture seule dans IE8 et les navigateurs inférieurs à IE8. Je dois donc penser à d'autres moyens. Le code est le suivant : 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd"); 
tx.onfocus=function(){ 
if(this.value!="密码") 
return; 
this.style.display="none"; 
pwd.style.display="block"; 
pwd.value=""; 
pwd.focus(); 
} 
pwd.onblur=function(){ 
if(this.value!=""){
return; 
} 
this.style.display="none"; 
tx.style.display=""; 
tx.value="密码"; 
} 
}
</script> 
</head> 
<body> 
<input type="text" value="密码" id="tx"/> 
<input type="password" id="pwd" /> 
</body> 
</html>

Le code ci-dessus répond à nos exigences. Une invite claire peut apparaître lors de la saisie du mot de passe, il est saisi en mode mot de passe.

Le principe de mise en œuvre est très simple. Dans l'état par défaut, la zone de texte est affichée avec type="text". Lorsque vous cliquez sur la zone de texte, la zone de mot de passe avec type="password" est affichée. la boîte est masquée, c'est-à-dire que je viens de faire un remplacement.

Le contenu ci-dessus est les connaissances partagées par l'éditeur sur la façon d'implémenter les invites dans la zone de mot de passe à l'aide de JavaScript. J'espère que vous l'aimerez.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comprendre Knockout et comment utiliser Knockout pour lier les compétences context_javascriptArticle suivant：Comprendre Knockout et comment utiliser Knockout pour lier les compétences context_javascript

Articles Liés

Voir plus