Maison >interface Web >tutoriel HTML >La solution parfaite à l'invite de la zone de saisie de la zone de texte en HTML indiquant que le contenu par défaut doit être ajouté
La solution parfaite à l'invite de la zone de saisie de la zone de texte en HTML indiquant que le contenu par défaut doit être ajouté
- 黄舟original
- 2017-07-19 17:38:5610202parcourir
La solution parfaite pour le texte d'invite de la zone de saisie de la zone de texte, le contenu par défaut doit être ajouté
<input> a une balise d'espace réservé, vous pouvez ajouter du texte d'invite, mais <textarea></textarea> ne dit généralement pas que nous écrivons le contenu de l'invite à l'extérieur <textarea></textarea>, comme indiqué ci-dessous : 
Bien sûr, cette mise en page n'est pas l'effet le plus souhaité
Ce que nous voulons. most est le texte. Affiché dans la zone de saisie, masqué lorsque l'on clique sur la zone de saisie. En quittant la zone de saisie, si la zone de saisie n'a pas de contenu, une invite s'affichera :
Tous ceux trouvés sur le. Internet utilise js pour définir la zone de texte en gagnant ou en perdant le focus. Le plus gros problème ici est le suivant : comme le contenu par défaut est défini, si l'utilisateur ne clique pas sur la zone de saisie et soumet directement, le contenu de l'invite par défaut sera soumis à l'arrière-plan.
La solution que j'ai trouvée est la suivante : écrivez le contenu de l'invite dans un p, contrôlez-le via l'attribut position de CSS, affichez le p dans <textarea></textarea> et cachez-le dans p lorsque <textarea></textarea> est cliqué. De cette façon, même si l'utilisateur ne clique pas sur la zone de saisie pour soumettre directement, le texte d'invite par défaut ne sera pas soumis en arrière-plan. L'effet est le suivant : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解决textarea输入框提示文字，必须添加默认内容</title>
<style type="text/css">
body{font-size:12px;}
p,p{margin:0;padding:0}
.textarea{
width:350px;height:80px;position:absolute;background:none;z-index:9
}
.note{
position:absolute;line-height:20px;padding:3px 5px;
}
</style>
</head><body>
<p style="position:relative;">
<textarea class="textarea" onfocus="document.getElementById('note').style.display='none'" onblur="if(value=='')document.getElementById('note').style.display='block'"></textarea>
<p id="note" class="note">
<font color="#777">在这里写入你对服务商的额外要求，服务商等级，好评率等</font>
</p>
</p></body>
</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!