Texteingabe mit beschreibendem Text

Question

Ich frage mich, ob es einen einfachen Weg mit Javascript (einschließlich JQuery, den wir auf der Website verwenden) gibt, um beschreibenden Text in eine Texteingabe einzufügen, bis der Benutzer darauf klickt, um ihren eigenen Text einzugeben .

Zum Beispiel würde ich das Wort "Suche" in eine Texteingabe setzen (vorzugsweise in einer helleren Farbe als echte Eingabe), bis der Benutzer auf die Eingabe klickt, wenn sie verschwindet und sie ihre Suchbegriffe eingeben lässt .

Ich möchte nicht wirklich das Wort 'Suche' haben, aber der Wert der Texteingabe ist, weil es etwas wichtig ist, dass der Benutzer nach der Wortsuche suchen kann.

Ich dachte an absolute Positionierung ein <p> Element mit der Wortsuche über die Eingabe und versteckt es, wenn es (oder die Eingabe) angeklickt wird.

Was denkst du? ist das furchtbar fehlgeleitet?

Answer 1

Ich stieß vor kurzem auf die jQuery Form Example plugin, die genau das tut, was Sie wollen. Die GitHub-Seite für das Projekt lautet here. Mit diesem Plugin können Sie einen Platzhalter Wert anzuzeigen, die auf Klick mit nur diese verschwinden:

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

Answer 2

Sie können den Anfangswert der Sucheingabe auf "Suchen" setzen und dann einen onClick-Listener hinzufügen, um ihn zu entfernen.

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

Es wird nicht die Fähigkeit zu suchen Benutzer auswirken „Suche“. Dies ist ein viel saubererer Ansatz als der Versuch, ein <p> oder <label> Element über den Eingang zu finalisieren.

EDIT: Sie sind alle absolut richtig - Entfernen des Wertes bei jedem Klick ist schlecht UX. Das ist es, was ich bekomme, um schnell zu antworten. :) Aktualisiert, um nur den Anfangswert zu entfernen.

Answer 3

Seit Jahren gibt es ein beliebtes "Projekt" bekannt als labels.js, ursprünglich von Aaron Boodman des alten youngpup.net geschrieben. Die Idee ist immer noch da und es gibt eine jQuery version, sogar (Demo # 4).

Answer 4

würde ich so etwas wie dies in jQuery tun:

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

Auf diese Weise Nutzer nicht verlieren, was sie vorher noch einmal bei Klick eingegeben haben. Der Wert wird nur gelöscht, wenn es sich um den Standardwert handelt, den Sie dem Eingabefeld zuweisen.

Answer 5

Ich will nicht wirklich das Wort haben ‚Suchen‘ kann der Wert des Texteingabe obwohl es etwas wichtig ist, dass der Benutzer nach der Wortsuche suchen kann.

In diesem Fall könnten Sie ein Hintergrundbild auf die Texteingabe verwenden. Sie könnten in CSS definieren, dass: Fokus sollte nicht den Hintergrund haben und dass die Unmoused sollte es haben. Diese Lösung funktioniert auch, wenn JavaScript deaktiviert ist.

Update: Getestet und funktioniert mit FF, Opera und Chrome aber nicht IE, da IE nicht unterstützen: Fokus, aber IE unterstützt das Hintergrundbild, also wenn der Text hellgrau ist sollte kein Problem sein.Und Sie können immer jQuery verwenden, um zu ändern, was das Eingabefeld für klassifiziert haben sollte.

Answer 6

Als Referenz wird diese Technik oft Wasserzeichen genannt.

Answer 7

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

/** 
* @author Remy Sharp 
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/ 
*/ 

(function ($) { 

$.fn.hint = function (blurClass) { 
    if (!blurClass) { 
    blurClass = 'blur'; 
    } 

    return this.each(function() { 
    // get jQuery version of 'this' 
    var $input = $(this), 

    // capture the rest of the variable to allow for reuse 
     title = $input.attr('title'), 
     $form = $(this.form), 
     $win = $(window); 

    function remove() { 
     if ($input.val() === title && $input.hasClass(blurClass)) { 
     $input.val('').removeClass(blurClass); 
     } 
    } 

    // only apply logic if the element has the attribute 
    if (title) { 
     // on blur, set value to title attr if text is blank 
     $input.blur(function() { 
     if (this.value === '') { 
      $input.val(title).addClass(blurClass); 
     } 
     }).focus(remove).blur(); // now change all inputs to title 

     // clear the pre-defined text when form is submitted 
     $form.submit(remove); 
     $win.unload(remove); // handles Firefox's autocomplete 
    } 
    }); 
}; 

})(jQuery); 


$(function(){ 
    // find all the input elements with title attributes 
    $('input[title!=""]').hint(); 
}); 

Answer 8

Möglicherweise möchten Sie dies überprüfen: http://www.newmediacampaigns.com/page/nmcformhelper

Grundsätzlich HTML 5 unterstützt die 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 andere Browser wie Firefox und IE können Sie dieses Skript verwenden, um die Wirkung von Javascript zu simulieren, wenn der Browser die HTML 5-Funktion nicht unterstützt.