Jak sprawić, by pole tekstowe HTML pokazywało podpowiedź, gdy jest puste?

, który jest znany jako znak wodny textbox, i odbywa się 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ą placeholder atrybut W HTML (obsługa przeglądarki ). font-style i color mogą być zmienione za pomocą CSS (chociaż obsługa przeglądarki 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 dodawać i usuwać specjalną klasę CSS i modyfikować wartość wejściową onfocus/onblur z 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ę hint ze stylami, które chcesz w CSS, na przykład:

input.hint {
    color: grey;
}

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

Ale jeśli chcesz szybkiego i brudnego rozwiązania, jest to twoje 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 żądaną kolorystykę.

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

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

Następnie Adnotuj dowolne wejścia, które chcesz mieć podpowiedzi za pomocą klasy 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 Google Ajax library cache i trochę magii jQuery.

To będzie CSS:

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

To byłby 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ć zarówno GAJAXLibs i w jQuery.

Teraz to staje się bardzo proste. W html możemy podać atrybut placeholder dla elementów input .

Np.

<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: naspinski ' s jQuery link 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. :)

Znalazłem wtyczkę jQueryjQuery Watermark być lepszym niż ten wymieniony w górnej odpowiedzi. Dlaczego lepiej? Ponieważ obsługuje pola wprowadzania haseł. Ponadto ustawienie koloru znaku wodnego (lub innych atrybutów) jest tak proste, jak utworzenie odniesienia .watermark w pliku CSS.

To się nazywa "znak wodny".

Znalazłem wtyczkę jQueryjQuery watermark która, w przeciwieństwie do pierwszej odpowiedzi, nie wymaga dodatkowej konfiguracji(oryginalna odpowiedź wymaga również specjalnego wywołania przed wysłaniem formularza).

Użyj jQuery Form Notifier - jest to jedna z najpopularniejszych wtyczek jQuery i nie cierpi z powodu błędów niektórych innych sugestii jQuery tutaj (na przykład możesz dowolnie stylować znak wodny, nie martwiąc się, czy zostanie zapisany do bazy 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 również wpłynęły na pola tekstowe - nie to, czego chciałem). Plus z jQuery Znak wodny to możliwość przeciągania i upuszczania tekstu na pola (jQuery Form Notifier na to nie pozwala).

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

Użyj obrazka tła do renderowania tekstu:

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

Następnie wystarczy wykryć value == 0 i zastosować odpowiednią klasę:

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

A kod JavaScript Jquery wygląda tak:

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 mieć pole odczytu "Szukaj", a następnie gdy fokus zostanie zmieniony na niego, Usuń Tekst. Coś takiego:

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

Oczywiście jeśli to zrobisz, tekst użytkownika zniknie po kliknięciu. Więc pewnie chcesz użyć czegoś bardziej wytrzymałego:

<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 zostanie załadowana po raz pierwszy, w polu tekstowym pojawi się wyszukiwanie w kolorze szarym, jeśli chcesz.

Gdy pole wprowadzania otrzymuje fokus, Zaznacz cały tekst w polu wyszukiwania, aby użytkownik mógł po prostu zacząć wpisywać, co spowoduje usunięcie zaznaczonego tekstu w procesie. 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 podświetlać 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 blur, gdy ładowanie strony jest gotowe, które 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 onblura:

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

(możesz użyć czegoś sprytniejszego, jak funkcja frameworku, aby zmienić nazwę klasy, jeśli chcesz.)

Z takim CSS:

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

$('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">

Prosty znacznik Html 'required' jest przydatny.

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

Użytkownik AJAXToolkit z http://asp.net