HTML/CSS Erstellen eines Textfelds mit Text, der ausgegraut ist und verschwindet, wenn ich klicke, um Informationen einzugeben, wie?

Lesezeit: 4 Minuten

Wie erstelle ich ein Textfeld mit ausgegrautem Inhalt, und wenn ich darauf klicke, um Text einzugeben, verschwindet der ausgegraute Teil und ich kann den gewünschten Text eingeben?

Beispiel:

Ein Textfeld “Vorname”. Die Wörter “Vorname” sind im Textfeld ausgegraut, wenn ich klicke, verschwinden diese Wörter und ich schreibe meinen Namen hinein.

  • Dies ist eine Funktion, die als „Platzhalter“ bezeichnet wird. Chrome, Firefox und IE10 unterstützen das html5-Platzhalterattribut.

    – null_cool

    14. Juli 2015 um 20:31 Uhr


Benutzer-Avatar
Psychotronisch

Chrome, Firefox, IE10 und Safari unterstützen das html5-Platzhalterattribut

<input type="text" placeholder="First Name:" />

Um eine browserübergreifende Lösung zu erhalten, müssen Sie etwas Javascript verwenden. Es gibt viele vorgefertigte Lösungen, obwohl ich keine aus dem Kopf kenne.

http://www.w3schools.com/tags/att_input_placeholder.asp

Benutzer-Avatar
Floern

Diese Antwort veranschaulicht einen Ansatz vor HTML5. Bitte werfen Sie einen Blick auf die Antwort von Psytronic für eine moderne Lösung mit der placeholder Attribut.


HTML:

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

Javascript:

function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}

  • Ich denke, diese Antwort wurde in HTML5 durch “Platzhalter” ersetzt (siehe Antwort von Psytronic).

    – Steve Smith

    8. März 2018 um 10:43 Uhr

  • @SteveSmith in der Tat, ich habe eine Notiz dazu hinzugefügt.

    – Floern

    8. März 2018 um 12:08 Uhr

Mit HTML5 können Sie dies nativ tun mit: <input name="first_name" placeholder="First Name">

Dies wird jedoch nicht von allen Browsern unterstützt (IE)

Das kann funktionieren:

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value="":null">

Wenn Sie jQuery verwenden, können Sie andernfalls .focus und .css verwenden, um die Farbe zu ändern.

Benutzer-Avatar
Jay

Wenn Sie nur auf HTML5 abzielen, können Sie Folgendes verwenden:

<input type="text" id="firstname" placeholder="First Name:" />

Für Nicht-HTML5-Browser würde ich auf Floerns Antwort aufbauen, indem ich jQuery verwende und das Javascript nicht aufdringlich mache. Ich würde auch eine Klasse verwenden, um die unscharfen Eigenschaften zu definieren.

$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($('#Comments'));

    $('#Comments').blur(function () {
        inputBlur(this);
    });
    $('#Comments').focus(function () {
        inputFocus(this);
    });

})

Funktionen:

function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}

CSS:

.blurredDefaultText {
    color:#888 !important;
}

Benutzer-Avatar
Vivek Mhatre

Der kürzeste Weg besteht darin, den folgenden Code direkt als zusätzliche Attribute in dem Eingabetyp hinzuzufügen, den Sie ändern möchten.

onfocus="if(this.value=='Search')this.value=""" 
onblur="if(this.value=='')this.value="Search""

Bitte beachten Sie: Ändern Sie den Text „Suchen“ in „go“ oder einen beliebigen anderen Text, der Ihren Anforderungen entspricht.

Das funktioniert:

<input type="text" id="firstname" placeholder="First Name" />

Notiz: Sie können den Platzhalter, die ID und den Typwert in „E-Mail“ oder was auch immer Ihren Anforderungen entspricht ändern.

Weitere Details von W3Schools unter:http://www.w3schools.com/tags/att_input_placeholder.asp

Aber bei weitem die besten Lösungen sind von Floern und Vivek Mhatre (herausgegeben von j0k)

Ich habe ein Code-Auszug unten, das ist eine typische Webseite.

.Submit {
    background-color: #008CBA;
    border: 3px;
    color: white;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
div {
  background-color: yellow;
  }
<div>
  <center>
  <p>Some functions may not work, such as the css ect.
  <p>First Name:<input type="text" id="firstname" placeholder="John" />
  <p>Surname:<input type="text" id="surname" placeholder="Doe" />
  <p>Email:<input type="email" id="email" placeholder="[email protected]" />
  <p>Password:<input type="email" id="email" placeholder="[email protected]" />
  <br /><button class="submit">Submit</button>                 </center>
</div>

Benutzer-Avatar
Schei

Dies ist eine ausführliche Version, um Ihnen beim Verständnis zu helfen

function setVolatileBehavior(elem, onColor, offColor, promptText){ //changed spelling of function name to be the same as name used at invocation below
elem.addEventListener("change", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value="";
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("blur", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value="";
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("focus", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value="";
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.value=promptText;
elem.style.color=offColor;
}

Verwenden Sie so:

setVolatileBehavior(document.getElementById('yourElementID'),'black','gray','Name');

1297920cookie-checkHTML/CSS Erstellen eines Textfelds mit Text, der ausgegraut ist und verschwindet, wenn ich klicke, um Informationen einzugeben, wie?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy