Jak sprawić, aby pole tekstowe HTML wyświetlało podpowiedź, gdy jest puste?

Chcę, aby pole wyszukiwania na mojej stronie wyświetlało słowo „Szukaj” szarą kursywą. Gdy pole zostanie zogniskowane, powinno wyglądać jak puste pole tekstowe. Jeśli jest już w nim tekst, powinien wyświetlać tekst normalnie (czarny, nie kursywą). Pomoże mi to uniknąć bałaganu poprzez usunięcie etykiety.

BTW, jest to wyszukiwanie Ajax na stronie , więc nie ma przycisku.

Inną opcją, jeśli chcesz korzystać z tej funkcji tylko w nowszych przeglądarkach, jest skorzystanie z obsługi oferowanej przez atrybut zastępczy HTML 5 :

<input name="email" placeholder="Email Address">

W przypadku braku jakichkolwiek stylów w Chrome wygląda to następująco:

Możesz wypróbować wersje demo tutaj oraz w HTML5 Placeholder Styling z CSS .

Sprawdź zgodność tej funkcji w przeglądarce . Obsługa przeglądarki Firefox została dodana w wersji 3.7. Chrome jest w porządku. Internet Explorer dodał obsługę tylko w 10. Jeśli celujesz w przeglądarkę, która nie obsługuje symboli zastępczych wprowadzania danych, możesz użyć wtyczki jQuery o nazwie symbol zastępczy jQuery HTML5 , a następnie po prostu dodaj następujący kod JavaScript, aby ją włączyć.

$('input[placeholder], textarea[placeholder]').placeholder();

Jest to znane jako znak wodny pola tekstowego i odbywa się to za pomocą JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

lub jeśli używasz jQuery, znacznie lepsze podejście:

• http://digitalbush.com/projects/watermark-input-plugin/
• lub code.google.com/p/jquery-watermark

Możesz ustawić symbol zastępczy za pomocą placeholderatrybutu w HTML ( obsługa przeglądarki ). font-styleI colormogą być zmieniane z CSS (chociaż wsparcie przeglądarka jest ograniczona).

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Możesz dodać i usunąć specjalną klasę CSS oraz zmodyfikować wartość wejściową onfocus/ za onblurpomocą JavaScript:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

Następnie określ klasę podpowiedzi stylem, który chcesz w swoim CSS, na przykład:

input.hint {
    color: grey;
}

Najlepszym sposobem jest połączenie zdarzeń JavaScript za pomocą biblioteki JavaScript, takiej jak jQuery lub YUI, i umieszczenie kodu w zewnętrznym pliku .js.

Ale jeśli chcesz szybkiego i brudnego rozwiązania, oto wbudowane rozwiązanie HTML:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

Zaktualizowano : Dodano żądane kolory.

Jakiś czas temu opublikowałem rozwiązanie tego problemu na mojej stronie internetowej . Aby go użyć, zaimportuj pojedynczy .jsplik:

<script type="text/javascript" src="/hint-textbox.js"></script>

Następnie dodaj adnotacje do wszystkich danych wejściowych, które mają mieć wskazówki w klasie CSS hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

Więcej informacji i przykład są dostępne tutaj .

Oto funkcjonalny przykład z pamięcią podręczną biblioteki Google Ajax i odrobiną magii jQuery.

Byłby to CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Byłby to kod JavaScript:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

A to byłby HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

Mam nadzieję, że to wystarczy, aby zainteresować Cię zarówno GAJAXLib, jak i jQuery.

Teraz stało się to bardzo łatwe. W html możemy podać atrybut zastępczy dla elementów wejściowych .

na przykład

<input type="text" name="fst_name" placeholder="First Name"/>

sprawdź więcej szczegółów: http://www.w3schools.com/tags/att_input_placeholder.asp

Dla użytkowników jQuery: link jQuery naspinskiego wydaje się uszkodzony, ale spróbuj tego: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Otrzymasz darmowy samouczek wtyczki jQuery jako bonus. :)

Zauważyłem, że wtyczka jQuery znak wodny jQuery jest lepsza niż ta wymieniona w górnej odpowiedzi. Dlaczego lepiej Ponieważ obsługuje pola wprowadzania hasła. Ponadto ustawienie koloru znaku wodnego (lub innych atrybutów) jest tak proste, jak utworzenie .watermarkodwołania w pliku CSS.

Nazywa się to „znakiem wodnym”.

Znalazłem znak wodny jQuery wtyczki jQuery, który, w przeciwieństwie do pierwszej odpowiedzi, nie wymaga dodatkowej konfiguracji (pierwotna odpowiedź wymaga również specjalnego połączenia przed przesłaniem formularza).

Użyj jQuery Form Notifier - jest to jedna z najpopularniejszych wtyczek jQuery i nie zawiera błędów, które robią niektóre inne sugestie jQuery tutaj (na przykład możesz swobodnie stylizować znak wodny, nie martwiąc się, czy zostanie zapisany w Baza danych).

jQuery Watermark używa pojedynczego stylu CSS bezpośrednio na elementach formularza (zauważyłem, że właściwości rozmiaru czcionki CSS zastosowane do znaku wodnego miały również wpływ na pola tekstowe - nie to, co chciałem). Zaletą jQuery Watermark jest to, że możesz przeciągać tekst do pól (jQuery Form Notifier nie pozwala na to).

Inny, sugerowany przez innych (ten na digitalbrush.com), przypadkowo prześle wartość znaku wodnego do twojego formularza, więc zdecydowanie odradzam.

Do renderowania tekstu użyj obrazu tła:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Następnie wszystko, co musisz zrobić, to wykryć value == 0i zastosować odpowiednią klasę:

 <input class="foo fooempty" value="" type="text" name="bar" />

A kod JavaScript jQuery wygląda następująco:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Możesz łatwo napisać pole „Szukaj”, a następnie po zmianie fokusu usunąć tekst. Coś takiego:

<input onfocus="this.value=''" type="text" value="Search" />

Oczywiście, jeśli to zrobisz, własny tekst użytkownika zniknie po kliknięciu. Więc prawdopodobnie chcesz użyć czegoś bardziej niezawodnego:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Gdy strona ładuje się po raz pierwszy, w polu tekstowym pojawi się Wyszukiwanie, w kolorze szarym, jeśli chcesz.

Gdy pole wprowadzania zostanie aktywowane, zaznacz cały tekst w polu wyszukiwania, aby użytkownik mógł po prostu zacząć pisać, co spowoduje usunięcie zaznaczonego tekstu. Będzie to również działać dobrze, jeśli użytkownik chce użyć pola wyszukiwania po raz drugi, ponieważ nie będzie musiał ręcznie zaznaczać poprzedniego tekstu, aby go usunąć.

<input type="text" value="Search" onfocus="this.select();" />

Podoba mi się rozwiązanie „Knowledge Chikuse” - proste i jasne. Wystarczy dodać wywołanie, aby rozmazać, gdy ładowanie strony jest gotowe, co ustawi stan początkowy:

$('input[value="text"]').blur();

Chcesz przypisać coś takiego do onfocus:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

i to do onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(Możesz użyć czegoś sprytniejszego, na przykład funkcji frameworka, aby zmienić nazwę klasy, jeśli chcesz).

W przypadku niektórych CSS takich jak to:

input.placeholder{
    color: gray;
    font-style: italic;
}

Używam prostego, jednowierszowego rozwiązania javascript, które działa świetnie. Oto przykład zarówno dla pola tekstowego, jak i dla obszaru tekstowego:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

tylko „minusem” jest walidacja w $ _POST lub w walidacji Javascript przed zrobieniem czegokolwiek z wartością pola. Oznacza to, że sprawdzenie, czy wartością pola nie jest „Tekst”.

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

Przydatny jest prosty tag „wymagany” HTML.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

Określa, że ​​pole wprowadzania musi zostać wypełnione przed przesłaniem formularza lub naciśnięciem przycisku Prześlij. Oto przykład

Użytkownik AJAXToolkit ze strony http://asp.net