Wie kann ich Stack Overflow-ähnliche Wasserzeichen in Formularen implementieren?

Question

Ich erinnere mich, dass ich irgendwo ein Tutorial gesehen habe, in dem es darum geht, wie man seine Eingabeformulare "brauchbarer" gestalten kann.

Im Wesentlichen haben Sie einen Platzhalterwert und wenn Sie die Eingabe eingeben, blendet es den Hinweis sozusagen aus.

Nun, um es klar zu sagen: Ich möchte nicht, dass der Hinweis (Platzhalterwerttext) im Fokus verschwindet, sondern eher heller wird, wenn ich anfange, etwas einzugeben. Gute Beispiele:

• Schauen Sie sich die Formen auf Aardvark. Genau so möchte ich meine Eingabeformulare haben.

• Unser eigener Stack Overflow - wenn Sie versuchen, eine Frage zu stellen, wenn Sie in ein Eingabeformular klicken, wird der Text nicht sofort ausgeblendet. Sie sehen Ihren Cursor und den Hinweis. Aber wenn Sie anfangen zu tippen, blendet es den Hinweis aus. (Ich würde es vorziehen, um es zu einem viel helleren Farbton gehen zu müssen, anstatt alle zusammen aber, wie das oben Aardvark Beispiel versteckt.)

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

Irgendwelche Vorschläge/Links?

[Update: Ich habe kürzlich ein jQuery-Plugin In-Field Labels gefunden, das genau das tut, was ich will. Auch, here's the link zu einer Verbesserung des gleichen Plugins. ]

Answer 1

Sie können von diesem gestartet werden soll:

<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, dies kann man bekommen in die richtige Richtung gehen.

Ich bemerkte auch, dass die Formulare "Jetzt verbinden" um vark.com auch die Cursorposition an den Anfang des Textfelds setzen, anstatt es am Ende zu 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 Stodola überprüfen möchten:

• Setting Cursor Position in a Textbox or TextArea with Javascript

Answer 2

ein Eingabefeld haben, können nicht sowohl Standardtext und benutzer eingegebenen Text zur gleichen Zeit. Die einzige Möglichkeit, um genau das zu erreichen, was Sie verlangen, ist ein Hintergrundbild in den Eingabefeldern mit einem Bild, das den Standardtext enthält, den Sie anzeigen möchten, aber ich empfehle das sehr, da zwei Textschichten sehr verwirrend sein werden für den Benutzer. Der häufigste Weg, um dies zu erreichen (und was auf dem Beispiel-Website vark.com gemacht wird) ist die focus Methode zu verwenden, um den Text zu löschen:

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

es den Weg Stackoverflow (und Vark zu erreichen.com das Anmeldeformular) hat man die gleiche Methode mit dem keydown Ereignisse verwenden kann:

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

sowohl auf Fokus und Text Ihre Farbänderung auf klar zu erreichen 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 3

HTML5 hat die placeholder attribute, die für diese Aufgabe konzipiert ist.

Nur WebKit (die in Safari und Google Chrome verwendete Rendering-Engine) unterstützt es jedoch bisher. Sie werden ein JavaScript-Fallback wie das von Daniel's benötigen, wenn Platzhalter nicht unterstützt werden.

Es ist trivial zu check for placeholder support in JavaScript.

Answer 4

Als Reaktion auf @ Pauls Beitrag bemerkte ich das Verhalten des HTML5 Platzhalters wirkt seltsam auf meinem Android-Emulator. Der Platzhalter sieht gut aus, bis Sie darauf klicken und er wird schwarz mit dem Cursor rechts neben dem Wort. Zugegeben, wenn Sie tippen, wird es verschwinden, aber es ist nicht intuitiv. Also schrieb ich einige jQuery um es zu beheben (wo ist mein HTML5/jQuery Abzeichen?)

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

Answer 5

Ich schrieb this example die I-Mangels eines besseren Namen genannte persistente Platzhalter.

Es erfordert ein wenig mehr Markup, ein div eine label und input Einwickeln, aber das löst eine Menge anderer Probleme (wie Platzhalter in Ihre Formulardaten erhalten oder Passwortfelder nicht funktioniert) und der tatsächlichen Markup ist sehr sauber zu lesen . Sie enden mit etwas wie folgt:

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

und nach dem Einschließen der CSS und JS, es funktioniert einfach.