Die perfekte Lösung für den Eingabeaufforderungstext des Textbereichs in HTML, der Standardinhalte hinzufügen muss-HTML-Tutorial-php.cn

Die perfekte Lösung für den Eingabeaufforderungstext des Textbereichs in HTML, der Standardinhalte hinzufügen muss

黄舟

Freigeben： 2017-07-19 17:38:56

Original

10213 Leute haben es durchsucht

Die perfekte Lösung für Texteingabefeld-Eingabeaufforderungstext, Standardinhalt muss hinzugefügt werden

<input> hat ein Platzhalter-Tag, Sie können Eingabeaufforderungstext hinzufügen, aber <textarea></textarea> nicht, im Allgemeinen sagen wir, wir schreiben den Inhalt der Eingabeaufforderung außerhalb <textarea></textarea>, wie unten gezeigt:
Die perfekte Lösung für den Eingabeaufforderungstext des Textbereichs in HTML, der Standardinhalte hinzufügen muss

Natürlich ist dieses Layout nicht der gewünschte Effekt
Was wir wollen Der meiste Text wird im Eingabefeld angezeigt und beim Verlassen des Eingabefelds ausgeblendet. Wenn das Eingabefeld keinen Inhalt hat, wird eine Eingabeaufforderung angezeigt:

Alle im Eingabefeld gefundenen Texte Das Internet verwendet js, um den Textbereich durch Gewinnen oder Verlieren des Inhalts festzulegen. Das größte Problem hierbei ist: Da der Standardinhalt festgelegt ist, wird der Standardinhalt der Eingabeaufforderung übermittelt, wenn der Benutzer nicht auf das Eingabefeld klickt und ihn direkt sendet der Hintergrund.

Die Lösung, die ich gefunden habe, ist: Schreiben Sie den Inhalt der Eingabeaufforderung in ein p, steuern Sie ihn über das Positionsattribut von CSS, zeigen Sie das p in <textarea></textarea> an und verstecken Sie es in p, wenn auf <textarea></textarea> geklickt wird. Auf diese Weise wird der Standard-Eingabeaufforderungstext nicht an den Hintergrund gesendet, auch wenn der Benutzer nicht direkt auf das Eingabefeld klickt. Der Effekt ist wie folgt:
Die perfekte Lösung für den Eingabeaufforderungstext des Textbereichs in HTML, der Standardinhalte hinzufügen muss

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDie perfekte Lösung für den Eingabeaufforderungstext des Textbereichs in HTML, der Standardinhalte hinzufügen muss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!