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é-tutoriel HTML-php.cn

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é

黄舟

Libérer： 2017-07-19 17:38:56

original

10189 Les gens l'ont consulté

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 :
La solution parfaite à linvite de la zone de saisie de la zone de texte en HTML indiquant que le contenu par défaut doit être ajouté

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 :
La solution parfaite à linvite de la zone de saisie de la zone de texte en HTML indiquant que le contenu par défaut doit être ajouté

<!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(&#39;note&#39;).style.display=&#39;none&#39;" onblur="if(value==&#39;&#39;)document.getElementById(&#39;note&#39;).style.display=&#39;block&#39;"></textarea>
        <p id="note" class="note">
            <font color="#777">在这里写入你对服务商的额外要求，服务商等级，好评率等</font>
        </p>
    </p></body>
 </html>

Copier après la connexion

<.>

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!