Hintergrundtext im Eingabetyp Text

Ich denke, es ist eine einfache Frage, aber ich weiß nicht, wie ich diese Frage in Google suchen soll

Ich brauche einen Hintergrundtext in einem Eingabetextfeld. Wie: Geben Sie Ihren Namen ein. Und wenn ich in das Feld drücke, um meinen Namen einzufügen, verschwindet der Text

Gut, danke für die Lösung.

<input id="textfield" name="textfield" type="text" placeholder="correct" />

Jetzt bekomme ich die zweite Frage. Wie kann ich die Farbe des Platzhalters ändern? Hier ist mein Textbereich:
http://jsfiddle.net/wy8cP/1/

So erhalten Sie einen Platzhalter mit HTML5:

<input id="textfield" name="textfield" type="text" placeholder="enter something" />

BEARBEITEN:

Ich empfehle nicht mehr, Ihre eigenen Polyfills zusammenzuhacken, wie ich unten gezeigt habe. Sie sollten Modernizr verwenden, um zunächst zu erkennen, ob überhaupt ein Polyfill benötigt wird, und dann eine Polyfill-Bibliothek aktivieren, die Ihren Anforderungen entspricht. Es gibt eine gute Auswahl an Platzhalter-Polyfills im Modernizr-Wiki aufgeführt.

ORIGINAL (Fortsetzung):

Und hier ist eine Polyfill für die Kompatibilität:

<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value="";}" onblur="if (this.value == '') {this.value="enter something";}">

http://jsfiddle.net/q3V4E/1/

Ein besserer Shim-Ansatz besteht darin, dieses Skript beim Laden der Seite auszuführen und Ihre Platzhalter in das data-placeholder-Attribut einzufügen, sodass Ihr Markup so aussieht:

<input id="textfield" name="textfield" type="text" data-placeholder="enter something">

und dein js sieht so aus:

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = inputs[i].getAttribute('data-placeholder');
    inputs[i].addEventListener('focus', function() {
        if (this.value == this.getAttribute('data-placeholder')) {
            this.value="";
        }
    });
    inputs[i].addEventListener('blur', function() {
        if (this.value == '') {
            this.value = this.getAttribute('data-placeholder');
        }
    });
}

http://jsfiddle.net/q3V4E/4/

HTML5 bietet eine placeholder Attribut, das dieses spezielle Problem anspricht. Sehen dieser Link für mehr Informationen (JSFiddle)

<input type="text" placeholder="insert your name" />

Sie können jederzeit einen Nicht-HTML5-Javascript-Fallback bereitstellen, wie der erläuterte hier, oder in None jquery Platzhalter-Fallback? wenn Sie JQuery nicht verwenden.

Ich glaube, Sie suchen nach Platzhaltern für HTML5-Formularfelder … 🙂

http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

Die jquery-Version der nicht von HTML 5 akzeptierten Antwort:

    var inputs = $("input[type="text"]", context);
    $.each(inputs, function (i, obj) {
        $(obj).val($(obj).attr('data-placeholder'));
        $(obj).on('focus', function () {
            if ($(this).val() == $(this).attr('data-placeholder')) {
                $(this).val('');
            }
        });
        $(obj).on('blur', function () {
            if ($(this).val() == '') {
                $(this).val($(this).attr('data-placeholder'));
            }
        });
    });

Das Ändern der Farbe des Platzhalters kann mit CSS erreicht werden:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Quelle: https://css-tricks.com/almanac/selectors/p/placeholder/

Für Nicht-HTML5 schlage ich eine nette Javascript-Lösung wie toggleval.js vor – dadurch müssen Sie nicht jedes Eingabefeld selbst inline machen; es wäre global.

http://snipplr.com/view/9077/

Das Skript, das Sie danach aufrufen würden, würde in etwa so aussehen:

    <script type="text/javascript">
    $(document).ready(function() {
        // Input Box ToggleVal
        $("input[type=text]").toggleVal();
        $("input[type=password]").toggleVal();
    });
    </script>