interface Web
js tutoriel
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
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.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment récupérer des fichiers WeChat expirés ? Les fichiers WeChat expirés peuvent-ils être récupérés ?
Feb 22, 2024 pm 02:46 PM
Ouvrez WeChat, sélectionnez Paramètres dans Moi, sélectionnez Général, puis sélectionnez Espace de stockage, sélectionnez Gestion dans Espace de stockage, sélectionnez la conversation dans laquelle vous souhaitez restaurer les fichiers et sélectionnez l'icône de point d'exclamation. Didacticiel Modèle applicable : iPhone13 Système : iOS15.3 Version : WeChat 8.0.24 Analyse 1 Ouvrez d'abord WeChat et cliquez sur l'option Paramètres sur la page Ma. 2 Ensuite, recherchez et cliquez sur Options générales sur la page des paramètres. 3Cliquez ensuite sur Espace de stockage sur la page générale. 4 Ensuite, cliquez sur Gérer sur la page de l'espace de stockage. 5Enfin, sélectionnez la conversation dans laquelle vous souhaitez récupérer des fichiers et cliquez sur l'icône de point d'exclamation à droite. Supplément : les fichiers WeChat expirent généralement au bout de quelques jours. Si le fichier reçu par WeChat n'a pas été cliqué, le système WeChat l'effacera après 72 heures. Si le fichier WeChat a été consulté,
Comment récupérer l'historique de navigation en mode navigation privée
Feb 19, 2024 pm 04:22 PM
La navigation privée est un moyen très pratique de naviguer et de protéger votre vie privée lorsque vous surfez sur Internet sur votre ordinateur ou appareil mobile. Le mode de navigation privée empêche généralement le navigateur d'enregistrer votre historique de visites, de sauvegarder les cookies et les fichiers cache et d'empêcher le site Web que vous parcourez de laisser des traces dans le navigateur. Cependant, dans certains cas particuliers, nous pouvons être amenés à restaurer l'historique de navigation de la navigation incognito. Tout d’abord, il faut être clair : le but du mode de navigation privée est de protéger la vie privée et d’empêcher des tiers d’obtenir l’historique en ligne de l’utilisateur à partir du navigateur. Par conséquent, la navigation incognito
Comment restaurer l'album photo Xiaomi Cloud en local
Feb 24, 2024 pm 03:28 PM
Comment restaurer l'album photo Xiaomi Cloud en local ? L'application Xiaomi Cloud Photo Album peut restaurer en local, mais la plupart des amis ne savent pas comment restaurer l'album photo Xiaomi Cloud en local. L'étape suivante consiste à restaurer l'album photo Xiaomi Cloud en local. Tutoriels graphiques de méthode locale, les utilisateurs intéressés viennent y jeter un oeil ! Comment restaurer l'album photo cloud Xiaomi en local 1. Ouvrez d'abord la fonction de paramètres dans le téléphone Xiaomi et sélectionnez [Avatar personnel] sur l'interface principale ; 2. Entrez ensuite dans l'interface du compte Xiaomi et cliquez sur la fonction [Service Cloud] ; passez à Xiaomi Pour la fonction de service cloud, sélectionnez [Cloud Backup] ; 4. Enfin, dans l'interface comme indiqué ci-dessous, cliquez sur [Cloud Album] pour restaurer l'album en local.
Comment restaurer l'étincelle de discussion sur TikTok
Mar 16, 2024 pm 01:25 PM
Sur Douyin, une courte plateforme vidéo pleine de créativité et de vitalité, nous pouvons non seulement profiter d'une variété de contenus passionnants, mais également avoir des communications approfondies avec des amis partageant les mêmes idées. Parmi eux, les étincelles de discussion sont un indicateur important de l’intensité de l’interaction entre les deux parties, et elles enflamment souvent par inadvertance les liens émotionnels entre nous et nos amis. Cependant, parfois pour certaines raisons, le chat spark peut être déconnecté. Alors, que devons-nous faire si nous voulons restaurer le chat spark ? Ce guide didacticiel vous apportera une introduction détaillée à la stratégie de contenu, dans l'espoir d'aider tout le monde. Comment restaurer l'étincelle du chat Douyin ? 1. Ouvrez la page de message Douyin et sélectionnez un ami avec qui discuter. 2. Envoyez des messages et discutez entre vous. 3. Si vous envoyez des messages en continu pendant 3 jours, vous pouvez obtenir le logo Spark. Tous les 3 jours, envoyez-vous des photos ou des vidéos
Comment restaurer le fond d'écran par défaut dans Win10
Feb 10, 2024 pm 10:51 PM
La mise à jour de mai 2019 de Windows 10 propose un nouvel arrière-plan de bureau par défaut plus lumineux. Cela a fière allure - avec le nouveau thème de lumière. Si vous utilisez le thème sombre de Windows 10, vous souhaiterez peut-être un arrière-plan plus sombre. Étrangement, l'arrière-plan du bureau d'origine de Windows 10 a été supprimé de la dernière version de Windows 10. Vous devez le télécharger depuis le Web ou copier ses fichiers depuis un ancien PC Windows 10. Bien que nous n'ayons pas pu trouver cette image de fond d'écran sur le site officiel de Microsoft, vous pouvez la télécharger à partir d'autres sources. Nous avons trouvé une copie du fond d’écran original de Windows 10 en résolution 4K sur Imgur. De plus, il existe d'autres tailles et davantage de murs par défaut
Comment supprimer complètement les virus des téléphones mobiles Méthodes recommandées pour lutter contre les virus sur les téléphones mobiles
Feb 29, 2024 am 10:52 AM
Une fois qu'un téléphone mobile est infecté par un certain virus cheval de Troie, il ne peut pas être détecté et tué par un logiciel antivirus. Ce principe est similaire à celui d'un ordinateur infecté par un virus tenace. Le virus ne peut être complètement supprimé qu'en formatant le lecteur C et en le supprimant. réinstaller le système, puis j'expliquerai comment nettoyer complètement le virus une fois que le téléphone mobile est infecté par un virus tenace. Méthode 1 : ouvrez le téléphone et cliquez sur « Paramètres » - Autres paramètres - « Restaurer le téléphone » pour restaurer les paramètres d'usine du téléphone. Remarque : Avant de restaurer les paramètres d'usine, vous devez sauvegarder les données importantes du téléphone. Les paramètres d'usine sont équivalents. à celles de l'ordinateur. "C'est la même chose que le formatage et la réinstallation du système." Après la récupération, les données du téléphone seront effacées. Méthode 2 (1) Éteignez d'abord le téléphone, puis appuyez et maintenez le "bouton d'alimentation". " + "bouton volume + ou bouton volume -" sur le téléphone en même temps.
Comment récupérer le journal emmo supprimé
Feb 27, 2024 pm 04:40 PM
Emmo Diary est un logiciel spécialement conçu pour enregistrer votre humeur. Il vous offre un espace journal privé, vous permettant d'enregistrer des choses importantes ou insignifiantes au quotidien. Grâce à une technologie unique de reconnaissance des émotions, Emmo Diary peut également vous aider à mieux comprendre et gérer vos émotions. Mais parfois, je constate que mon journal a été accidentellement supprimé et je ne sais pas comment le restaurer. Ce guide didacticiel vous apportera donc un guide de récupération détaillé, dans l'espoir d'aider toutes les personnes dans le besoin. Comment Emmo peut-il récupérer son ancien journal ? 1. Cliquez sur l'icône [Paramètres] dans le coin inférieur gauche de l'écran de sélection emmo pour entrer ; 2. Sélectionnez l'icône [Sauvegarde et restauration des données] sur l'écran et entrez l'opération.
Comment restaurer les commentaires supprimés sur Xiaohongshu ? Des conseils pour les commentaires supprimés ?
Mar 27, 2024 am 11:56 AM
Xiaohongshu est une plateforme sociale de commerce électronique populaire où les utilisateurs peuvent partager des expériences d'achat, des détails sur leur vie, etc. Lors de l'utilisation, certains utilisateurs peuvent voir leurs commentaires supprimés. Alors, comment restaurer les commentaires supprimés sur Xiaohongshu ? 1. Comment restaurer les commentaires supprimés sur Xiaohongshu ? S'il s'avère qu'un commentaire a été supprimé par erreur, les utilisateurs peuvent choisir d'attendre que l'équipe officielle de Xiaohongshu le restaure. Dans ce cas, il est préférable d’être patient et d’attendre car l’équipe officielle peut automatiquement traiter et reprendre les commentaires après un certain temps. Si vous constatez qu'un commentaire a été supprimé, envisagez de republier un contenu similaire. Mais lorsque vous republiez, assurez-vous que le contenu est conforme aux directives de la communauté de Xiaohongshu pour éviter d'être à nouveau supprimé. 3. Contactez le service client de Xiaohongshu : si vous pensez que votre commentaire a été erroné
