Texteingabe mit beschreibendem Text

Question

ich mich gefragt, ob es ein einfacher Weg, mit Javascript (einschließlich JQuery, die wir auf der Website verwenden) beschreibenden Text in einer Texteingabe zu setzen, bis der Benutzer darauf klickt, ihren eigenen Text eingeben.

Zum Beispiel würde Ich mag das Wort setzen ‚Suche‘ in einer Texteingabe (vorzugsweise in einer helleren Farbe als realer Eingang), bis der Benutzer die Eingabe klickt, wenn es verschwindet, und ermöglicht es ihnen, ihre Suchbegriffe eingeben.

Ich will nicht wirklich das Wort haben ‚Suchen‘, obwohl der Wert der Texteingabe, weil es etwas wichtig ist, dass der Benutzer für die Wortsuche suchen.

Ich dachte an einem absoluten Positionierung ein

Element mit dem Wortsuche über den Eingang und verstecke es, wenn es (oder der Eingang) angeklickt wird.

Was denken Sie? diese schrecklich fehlgeleitet ist?

Answer 1

Ich habe vor kurzem stieß in die jQuery Formular Beispiel Plugin , das tut genau das, was Sie wollen. Die Github-Seite für das Projekt ist hier . Mit diesem Plugin können Sie einen Platzhalter Wert anzuzeigen, die auf Klick mit nur diese verschwinden wird:

$('input#search').example('Search');

Answer 2

Sie können den Anfangswert der Sucheingabe auf „Suchen“ und dann einen onClick Zuhörer hinzufügen, es zu entfernen.

$("input.search-term").one("click", function() { $(this).removeAttr("value"); });

Es wird die Fähigkeit des Benutzers suchen keine Auswirkungen auf „Suche“. Dies ist ein viel sauberer Ansatz als zu versuchen, ein <p> oder <label> Element über den Eingang finagle.

EDIT: Sie sind alle absolut richtig - auf jeden Klick, den Wert zu entfernen schlechte UX ist. Das ist, was ich schnell für die Beantwortung bekommen. :) Aktualisiert nur den Anfangswert zu entfernen.

Answer 3

Sie können wollen, dies überprüfen: http://www.newmediacampaigns.com/page/nmcformhelper

Im Grunde HTML 5 unterstützt die < strong> Platzhalter Attribut für Eingabeelemente:

<input type="text" placeholder="Your browser supports placeholder text" size=38>

WebKit (Chrome und Safari) unterstützt dies jetzt, aber für anderen Browser wie Firefox und IE, können Sie dieses Skript verwenden, um die Wirkung mit Hilfe von JavaScript zu simulieren, wenn der Browser der HTML 5-Funktion nicht unterstützt.

Answer 4

Seit Jahren hat es ein beliebtes „Projekt“ bekannt als Etiketten. js , orignally von Aaron Boodman des alten youngpup.net geschrieben. Die Idee ist immer noch rund und es existiert eine jQuery Version , auch (Demo # 4).

Answer 5

  

Ich will nicht wirklich das Wort haben ‚Suchen‘, obwohl der Wert der Texteingabe, weil es etwas wichtig ist, dass der Benutzer für die Wortsuche suchen.

In diesem Fall können Sie ein Hintergrundbild auf der Text-Eingabe verwenden könnten. Sie könnten in CSS festlegen, dass: Fokus nicht den Hintergrund haben soll und dass die unfoucused soll es haben. Diese Lösung funktioniert auch, wenn Javascript deaktiviert ist.

Update: Getestet und arbeitet mit FF, Opera und Chrome, aber nicht IE, da IE nicht unterstützt: Fokus, aber IE unterstützt das Hintergrundbild, so dass, wenn der Text hellgrau ist, sollte kein Problem sein. Und Sie können immer jquery verwenden zu ändern, was das Eingabefeld eingestuft hat.

Answer 6

Ich war für diese Lösung suchen nicht lange her und Kreuz kam

Ich würde so etwas in jQuery tun:

$("input.searchterm").click(function() { 
  var $input = $(this);
  if ($input.val() == "enter search term") $input.val("");
};

Auf diese Weise Benutzer nicht verlieren, was sie vorher noch einmal bei Klick eingegeben haben. Der Wert würde nur gelöscht werden, wenn es der Standardwert, den Sie in das Eingabefeld zuweisen ist.

Als Referenz wird diese Technik oft als Watermarking .

Answer 7

Answer 8

Answer 9

Ich würde so etwas in jQuery tun:

$("input.searchterm").click(function() { 
  var $input = $(this);
  if ($input.val() == "enter search term") $input.val("");
};

Auf diese Weise Benutzer nicht verlieren, was sie vorher noch einmal bei Klick eingegeben haben. Der Wert würde nur gelöscht werden, wenn es der Standardwert, den Sie in das Eingabefeld zuweisen ist.

Answer 10

Als Referenz wird diese Technik oft als Watermarking .

Answer 11

Als Referenz wird diese Technik oft als Watermarking .

Answer 12

Answer 13