Come posso fare in modo che una casella di testo HTML mostri un suggerimento quando è vuota?

Voglio che la casella di ricerca sulla mia pagina web visualizzi la parola "Cerca" in corsivo grigio. Quando la casella riceve lo stato attivo, dovrebbe apparire come una casella di testo vuota. Se è già presente del testo, dovrebbe visualizzarlo normalmente (nero, non corsivo). Questo mi aiuterà a evitare il disordine rimuovendo l'etichetta.

A proposito, questa è una ricerca Ajax sulla pagina , quindi non ha alcun pulsante.

Un'altra opzione, se sei felice di avere questa funzione solo per i browser più recenti, è quella di utilizzare il supporto offerto dall'attributo segnaposto HTML 5 :

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

In assenza di stili, in Chrome sembra che:

Puoi provare le demo qui e in HTML5 Placeholder Styling con CSS .

Assicurati di controllare la compatibilità del browser di questa funzione . Il supporto per Firefox è stato aggiunto in 3.7. Chrome va bene. Internet Explorer ha aggiunto il supporto solo in 10. Se scegli come target un browser che non supporta segnaposto di input, puoi utilizzare un plug-in jQuery chiamato segnaposto HTML5 jQuery , quindi aggiungere il seguente codice JavaScript per abilitarlo.

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

Questa è nota come filigrana della casella di testo e viene eseguita tramite JavaScript.

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

o se usi jQuery, un approccio molto migliore:

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

È possibile impostare il segnaposto utilizzando l' placeholderattributo in HTML ( supporto del browser ). L' font-stylee colorpuò essere cambiata con i CSS (anche se il supporto del browser è limitata).

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">

È possibile aggiungere e rimuovere una classe CSS speciale e modificare il valore di input onfocus/ onblurcon 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...'; }">

Quindi specificare una classe di suggerimenti con lo stile desiderato nel CSS, ad esempio:

input.hint {
    color: grey;
}

Il modo migliore è collegare i tuoi eventi JavaScript usando una specie di libreria JavaScript come jQuery o YUI e inserire il tuo codice in un file .js esterno.

Ma se vuoi una soluzione rapida e sporca, questa è la tua soluzione HTML in linea:

<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'}" />

Aggiornato : aggiunti gli elementi coloranti richiesti.

Ho pubblicato una soluzione per questo sul mio sito Web qualche tempo fa. Per usarlo, importa un singolo .jsfile:

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

Quindi annota tutti gli input che vuoi avere suggerimenti con la classe CSS hintTextbox:

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

Maggiori informazioni ed esempi sono disponibili qui .

Ecco un esempio funzionale con la cache della libreria Google Ajax e un po 'di magia jQuery.

Questo sarebbe il CSS:

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

Questo sarebbe il codice 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>

E questo sarebbe l'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>

Spero sia abbastanza per farti interessare sia a GAJAXLibs che a jQuery.

Ora diventa molto facile. In html possiamo fornire l' attributo segnaposto per gli elementi di input .

per esempio

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

controlla per maggiori dettagli: http://www.w3schools.com/tags/att_input_placeholder.asp

Per gli utenti di jQuery: il link jQuery di naspinski sembra interrotto, ma prova questo: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Ottieni un tutorial gratuito sul plugin jQuery come bonus. :)

Ho trovato il plug-in jQuery jQuery Watermark migliore di quello elencato nella risposta in alto. Perché meglio? Perché supporta i campi di immissione della password. Inoltre, impostare il colore della filigrana (o altri attributi) è facile come creare un .watermarkriferimento nel tuo file CSS.

Questo si chiama "filigrana".

Ho trovato il plug-in jQuery filigrana jQuery che, a differenza della prima risposta, non richiede un'impostazione aggiuntiva (la risposta originale richiede anche una chiamata speciale prima dell'invio del modulo).

Usa jQuery Form Notifier : è uno dei plugin jQuery più popolari e non soffre dei bug che alcuni degli altri suggerimenti di jQuery qui fanno (ad esempio, puoi liberamente modellare la filigrana, senza preoccuparti se verrà salvato nella Banca dati).

jQuery Watermark utilizza un singolo stile CSS direttamente sugli elementi del modulo (ho notato che le proprietà della dimensione del carattere CSS applicate alla filigrana hanno influenzato anche le caselle di testo, non quello che volevo). Il vantaggio di jQuery Watermark è che puoi trascinare il testo nei campi (jQuery Form Notifier non lo consente).

Un altro suggerito da altri (quello di digitalbrush.com), invierà accidentalmente il valore della filigrana al modulo, quindi sconsiglio vivamente di farlo.

Usa un'immagine di sfondo per rendere il testo:

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

Quindi tutto ciò che devi fare è rilevare value == 0e applicare la classe giusta:

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

E il codice JavaScript jQuery è simile al seguente:

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

Si potrebbe facilmente avere una casella che legge "Cerca", quindi quando lo stato attivo viene modificato su di esso è necessario rimuovere il testo. Qualcosa come questo:

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

Naturalmente, se lo fai, il testo dell'utente scompare quando fa clic. Quindi probabilmente vuoi usare qualcosa di più robusto:

<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">

Quando la pagina viene caricata per la prima volta, fai apparire Cerca nella casella di testo, colorato di grigio se vuoi che sia.

Quando la casella di input riceve lo stato attivo, seleziona tutto il testo nella casella di ricerca in modo che l'utente possa semplicemente iniziare a digitare, che eliminerà il testo selezionato nel processo. Funzionerà bene anche se l'utente desidera utilizzare la casella di ricerca una seconda volta poiché non dovrà evidenziare manualmente il testo precedente per eliminarlo.

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

Mi piace la soluzione di "Knowledge Chikuse": semplice e chiara. Devi solo aggiungere una chiamata per sfocare quando il caricamento della pagina è pronto che imposterà lo stato iniziale:

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

Vuoi assegnare qualcosa di simile a onfocus:

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

e questo per onblur:

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

(Puoi usare qualcosa di un po 'più intelligente, come una funzione framework, per cambiare il nome della classe se vuoi.)

Con alcuni CSS come questo:

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

Sto usando una semplice soluzione javascript a una riga che funziona alla grande. Ecco un esempio sia per textbox che per textarea:

    <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'; }">

l'unico "aspetto negativo" è convalidare a $ _POST o nella convalida Javascript prima di fare qualsiasi cosa con il valore del campo. Significato, verificando che il valore del campo non sia "Testo".

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

Il tag 'richiesto' semplice HTML è utile.

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

Specifica che è necessario compilare un campo di input prima di inviare il modulo o premere il pulsante di invio. Ecco un esempio

Utente AJAXToolkit da http://asp.net