Wie kann ich Stack-Überlauf-wie Wasserzeichen in Formen umzusetzen?

Question

Ich erinnere mich, ein Tutorial irgendwo zu sehen, dass die Gespräche, wie man Stil Ihrer Eingabeformulare in einer „benutzbar“ Art und Weise.

Im Wesentlichen haben Sie einen Platzhalter Wert und wenn Sie den Eingang betreten, versteckt es den Hinweis Sozusagen.

Nun, nur klar zu sein: Ich möchte nicht den Hinweis (Platzhalter Wert Text) auf Fokus verschwinden, sondern eher leichter zu gehen, wenn ich zum ersten Mal der Eingabe etwas anfangen. Gute Beispiele:

• Überprüfen Sie die Formulare aus auf Aardvark . Das ist genau, wie ich wünsche, dass meine Eingabeformulare haben.

• Unsere eigene Stack-Überlauf - wenn Sie versuchen, eine Frage zu stellen, auf der Innenseite jeder Eingabemaske klicken, es macht keinen Hehl den Text sofort. Sie sehen Sie den Cursor sowie den Hinweis. aber wenn Sie mit der Eingabe beginnen, versteckt es den Hinweis. (Ich würde es vorziehen, sie gehen zu einem viel helleren Farbton aufweisen und nicht alle zusammen, obwohl versteckt, wie die oben Aardvark Beispiel.)

Ich erinnere mich sehr deutlich ein Tutorial irgendwo auf der interwebz mit dieser genauen Anforderung zu lesen, aber verflixt, ich habe vergessen, es zu einem Lesezeichen versehen.

Irgendwelche Vorschläge / Links?

[Update: Vor kurzem fand ich ein jQuery-Plugin In-Feld Labels das tut genau das, was ich wollen. Auch hier der Link ein Verbesserung des gleichen Plug-in. ]

Answer 1

Sie können von diesem gestartet werden sollen:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

Sie sollten wahrscheinlich die oben zwicken JavaScript-Funktionen in einer solchen Art und Weise zu verwenden, nicht Ihre Hinweis Zeichenfolge dreimal zu wiederholen, aber ich hoffe, dass diese bekommen können Sie in die richtige Richtung gehen.

Ich habe auch bemerkt, dass die „Join Now“ Formen an vark.com auch die Cursorposition auf den Anfang gesetzt des Textfelds, anstatt sie am Ende verlassen. Dies kann etwas schwierig sein, um es Cross-Browser funktioniert, aber Sie können die vorgeschlagene Lösung in dem folgenden Artikel von Josh überprüfen möchten Stodola :

• Einstellung Cursorposition in einer Textbox oder TextArea- mit Javascript

Answer 2

HTML5 hat das placeholder Attribut , die für diese Aufgabe sehr ausgelegt ist.

Nur WebKit (die Rendering-Engine verwendet in Safari und Google Chrome) unterstützt es so, obwohl weit. Sie werden für einen JavaScript-Rückfall wie Daniels soll, wenn Platzhalter nicht unterstützt wird.

Es ist trivial zu Check für placeholder Unterstützung in JavaScript .

Answer 3

Ein Eingabefeld kann nicht beides hat standardmäßig Text und vom Benutzer eingegebenen Text zur gleichen Zeit. Der einzig mögliche Weg zu erreichen, genau das, was Sie fragen, ein Hintergrundbild auf die Eingabefelder mit einem Bild haben, ist die Standard-Text enthalten, den Sie anzeigen wollte, aber ich sehr empfehlen dagegen als zwei Schichten Text wird für den Benutzer sehr verwirrend sein. Der häufigste Weg, um dies zu erreichen (und was auf dem Beispiel-Website erfolgt vark.com) ist den Fokus zu verwenden Methode löschen Sie den Text:

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

Um es zu erreichen, wie Stackoverflow (und Vark.com das Anmeldeformular) nicht können Sie die gleiche Methode mit dem keydown Ereignis:

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

sowohl auf Fokus und Text Ihre Farbänderung zu erreichen, klar auf keydown es wäre:

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

Answer 4

Als Antwort auf @ Paul Post, bemerkte ich das Verhalten der HTML5 Platzhalter wirkt seltsam auf meinem Android-Emulator. Der Platzhalter sieht gut aus, bis Sie darauf klicken und es wird mit dem Cursor nach rechts des Wortes schwarz. Zugegeben, wenn Sie geben es verschwinden wird, aber es ist nicht intuitiv. Also schrieb ich einige jQuery zu fixieren (wo ist mein HTML5 / jQuery Abzeichen?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

Answer 5

Ich schrieb dieses Beispiel die I-mangels eines besseren Namen -called persistent Platzhalter.

Es erfordert ein wenig mehr Markup, ein div eine label und input Verpackung, aber das löst eine Menge anderer Probleme (wie Platzhalter in Ihre Formulardaten erhalten oder Passwort-Felder nicht funktioniert) und dem eigentlichen Auszeichnungs sehr sauber ist zu lesen. Sie am Ende mit etwas wie folgt aus:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

und nach dem CSS und JS einschließlich, es funktioniert einfach.