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

Question

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 contiene già del testo, dovrebbe visualizzarlo normalmente (nero, non corsivo). Questo mi aiuterà a evitare il disordine rimuovendo l'etichetta.

A proposito, questa è una ricerca Ajax nella pagina, quindi ha nessun pulsante.

Answer 1

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 di HTML 5:

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

In assenza di stili, in Chrome sembra:

Puoi provare le demo qui e in Stile segnaposto HTML5 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 & Nbsp; 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 aggiungi il seguente codice JavaScript per abilitarlo.

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

Answer 2

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

• http://naspinski.net/ posta / Text-Input-Filigrane-con-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

Answer 3

Puoi impostare il segnaposto usando placeholder attributo in HTML ( supporto del browser ). font-style e color possono essere modificati con CSS ( sebbene il supporto del browser sia limitato).

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

Answer 4

Puoi aggiungere e rimuovere una classe CSS speciale e modificare il valore di input onfocus / onblur con 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 specifica una classe suggerimento con lo stile che desideri nel tuo CSS, ad esempio:

input.hint {
    color: grey;
}

Answer 5

Il modo migliore è collegare i tuoi eventi JavaScript usando una specie di libreria JavaScript come jQuery o YUI e inserisci 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.

Answer 6

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

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

Ulteriori informazioni ed esempi sono disponibili qui .

Answer 7

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 che sia abbastanza per farti interessare sia a GAJAXLibs che a jQuery.

Answer 8

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

per es.

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

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

Answer 9

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-suggerimenti /

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

Answer 10

Ho trovato il plug-in jQuery jQuery Watermark per essere 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 .watermark riferimento nel tuo file CSS.

Answer 11

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).

Answer 12

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à salvata nel database).

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 tuo modulo, quindi ti consiglio vivamente di non farlo.

Answer 13

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 == 0 e 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");
        }
    });
});

Answer 14

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

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

Answer 15

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, il 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();" />

Answer 16

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

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

Answer 17

Desideri assegnare qualcosa del genere 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 classe se vuoi.)

Con alcuni CSS come questo:

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

Answer 18

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

Answer 19

Il tag 'richiesto' semplice HTML è utile.

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

Answer 20

Utente AJAXToolkit da http://asp.net