Maison > Article > interface Web > JavaScript restaure automatiquement le texte par défaut après avoir cliqué pour effacer les compétences de texte box_javascript

JavaScript restaure automatiquement le texte par défaut après avoir cliqué pour effacer les compétences de texte box_javascript

WBOYoriginal: 2016-05-16 15:20:401392parcourir

L'exemple de cet article présente l'exemple de code js consistant à cliquer sur la zone de texte pour effacer le texte par défaut, le laisser puis le restaurer. Il est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant

Connaissances connexes :

1. Définition et utilisation de l'événement onclick :
Cet événement est déclenché lorsqu'un objet est cliqué.
Prise en charge du navigateur :
1), le navigateur IE prend en charge cet événement.
2) Le navigateur Firefox prend en charge cet événement.
3) Le navigateur Opera prend en charge cet événement.
4) Google Chrome prend en charge cet événement.
5), le navigateur Safria prend en charge cet événement.
Exemple de code :

<html>
<head>
<meta charset="gb2312"/>
<title>脚本之家</title>
<style type="text/css">
div{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 mydiv.onclick=function(){
 mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
</body>
</html>

Le code ci-dessus enregistre un gestionnaire d'événements onclick pour le div Lorsque vous cliquez sur le div, ce gestionnaire sera exécuté pour définir la couleur d'arrière-plan du div sur vert.

2. Définition et utilisation de l'événement onblur :
Cet événement est déclenché lorsque l'objet spécifié perd le focus.
Exemple de code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>脚本之家</title>
<style type="text/css">
.mytest{
 background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var username=document.getElementById("username");
 username.focus();
 username.onblur=function(){
 username.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
<input type="text" name="username" id="username" />
</body>
</html>

Le code ci-dessus lie la fonction de gestionnaire d'événements à l'événement onblur de l'élément d'entrée lorsque l'élément d'entrée perd le focus, la couleur d'arrière-plan peut être définie sur vert.

L'étape suivante est la chose la plus importante : Cliquez sur la zone de texte pour effacer le texte par défaut, quittez puis restaurez-le

Les zones de texte qui doivent être remplies sur de nombreux sites Web donneront par défaut une langue d'invite par défaut. Lorsque la souris clique sur cette zone de texte, le texte par défaut à l'intérieur peut être effacé lorsque le texte saisi est supprimé et le focus. quitte la zone de texte. Ensuite, écrivez le texte par défaut dans la zone de texte.
Le code est le suivant :

<html>
<head>
<meta charset="gb2312">
<title>点击文本框清除默认值</title>
<script type="text/javascript"> 
window.onload=function()
{
 var username=document.getElementById("username");
 username.onclick=function()
 {
 if(username.value=="请输入您的姓名")
 {
 username.value="";
 this.focus();
 }
 }
 username.onblur=function()
 {
 if(username.value=="")
 {
 username.value="请输入您的姓名";
 }
 }
}
</script>
</head>
<body>
<input type="text" value="请输入您的姓名" id="username" />
</body>
</html>

Le code ci-dessus répond à nos exigences. Lorsque vous cliquez sur la zone de texte, le contenu de la zone de texte peut être effacé. Si aucun contenu n'est saisi dans la zone de texte, lorsque le focus de la souris quitte la zone de texte à ce moment-là. La valeur de la zone de texte sera restaurée à son état par défaut. Cependant, si la zone de mot de passe est un peu gênante, car la zone de mot de passe n'est pas affichée en texte brut, la solution peut être trouvée dans le paragraphe suivant sur la façon d'implémenter une invite dans la zone de mot de passe.

Comment réaliser que l'invite apparaît dans la zone du mot de passe :
Parfois, nous avons besoin d'un langage d'invite dans le formulaire de connexion, tel que "Veuillez entrer votre nom d'utilisateur" et "Veuillez entrer votre mot de passe". Quant au nom d'utilisateur, c'est facile à dire, mais " Veuillez entrer votre mot de passe" apparaît dans la zone du mot de passe. Ce type de langage 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 :

<html> 
<head> 
<meta charset="gb2312"> 
<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. , ce qui signifie qu'il s'agit simplement d'un remplacement.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.

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：Solution au problème du sélecteur de jquery sous ie7 qui provoque l'ajout d'un fail_jqueryArticle suivant：Solution au problème du sélecteur de jquery sous ie7 qui provoque l'ajout d'un fail_jquery

Articles Liés

Voir plus