Come è possibile implementare filigrane simili a overflow dello stack nei moduli?

Question

Mi ricordo di aver visto un tutorial da qualche parte che parla di come modellare i moduli di input in un modo più "utilizzabile".

In sostanza, si dispone di un valore di segnaposto e quando si immette l'input, nasconde il suggerimento per così dire.

Ora, tanto per essere chiari: non voglio che il suggerimento (testo segnaposto) scompaia a fuoco, ma piuttosto che diventi più chiaro quando inizio a digitare qualcosa. Buoni esempi:

• Controllare i moduli su Aardvark. Questo è esattamente il modo in cui desidero avere i miei moduli di input.

• Il nostro overflow dello stack personale: quando si tenta di porre una domanda, facendo clic all'interno di qualsiasi modulo di input, non nasconde il testo immediatamente. Vedi il tuo cursore e il suggerimento. ma quando inizi a digitare, nasconde il suggerimento. (Io preferirei dover andare ad una tonalità molto più leggero, piuttosto che nascondere tutti insieme, però, come l'esempio Aardvark sopra.)

mi ricordo molto bene la lettura di un tutorial da qualche parte sulla interwebz a questo requisito esatto, ma maledizione, ho dimenticato di segnalarlo.

Eventuali suggerimenti/collegamenti?

[Aggiornamento: Recentemente ho trovato un plugin jQuery In-Field Labels che fa esattamente quello che voglio. Inoltre, here's the link per un miglioramento dello stesso plug-in. ]

Answer 1

si consiglia di partire da questo:

<input type="text" value="Your Hint Here" 
     onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';" 
     onKeyDown="if (this.value == 'Your Hint Here') { 
         this.value = ''; this.style.color = '#000'; }"> 

Probabilmente si dovrebbe modificare il precedente per utilizzare le funzioni JavaScript in modo di non ripetere la stringa suggerimento per tre volte, ma spero che questo si può ottenere andando nella giusta direzione.

Ho anche notato che i moduli "Join Now" allo vark.com impostano anche la posizione del cursore all'inizio della casella di testo anziché lasciarla alla fine. Questo può essere po 'difficile da farlo funzionare cross-browser, ma si consiglia di verificare la soluzione proposta nel seguente articolo di Josh Stodola:

• Setting Cursor Position in a Textbox or TextArea with Javascript

Answer 2

un campo di inserimento non può avere sia di testo predefinito e il testo inserito dall'utente allo stesso tempo. L'unico modo possibile per ottenere esattamente ciò che stai chiedendo è di avere un'immagine di sfondo nei campi di input con un'immagine contenente il testo predefinito che vuoi visualizzare, ma I altamente consigliare contro questo come due strati di testo sarà molto confuso per l'utente. Il modo più comune per raggiungere questo obiettivo (e ciò che viene fatto sul tuo esempio sito vark.com) è quello di utilizzare il metodo focus per cancellare il testo:

$('#my_input').focus(function() { 
    if($(this).val() == 'default text') { 
    $(this).val(''); 
    } 
}); 

Per raggiungere nel modo StackOverflow (e Vark.modulo di iscrizione del com) non è possibile utilizzare lo stesso metodo con il keydown evento:

$('#my_input').keydown(function() { 
    if($(this).val() == 'default text') { 
    $(this).val(''); 
    } 
}); 

Per raggiungere sia il cambiamento di colore sulla messa a fuoco e il testo chiaro su keydown sarebbe:

// set text to grey on focus 
$('#my_input').focus(function() { 
    if($(this).val() == 'default text') { 
    $(this).css('color', '#999999'); 
    } 
}); 

// set text to black and clear default value on key press 
$('#my_input').keydown(function() { 
    if($(this).val() == 'default text') { 
    $(this).val(''); 
    $(this).css('color', '#000000'); 
    } 
}); 

Answer 3

HTML5 ha la placeholder attribute, progettato per questo compito.

Solo WebKit (il motore di rendering utilizzato in Safari e Google Chrome) lo supporta finora. Ti consigliamo un fallback JavaScript come quello di Daniel per quando il segnaposto non è supportato.

È banale a check for placeholder support in JavaScript.

Answer 4

In risposta al post di @ Paul, ho notato che il comportamento del segnaposto HTML2 HTML5 si comporta in modo strano sul mio emulatore Android. Il segnaposto sembra fantastico finché non si fa clic su di esso e diventa nero con il cursore a destra della parola. Certo, se lo scrivi scomparirà, ma non è intuitivo. Così ho scritto un po 'di jQuery per risolvere il problema (dov'è il mio distintivo HTML5/jQuery?)

$(document).ready(function() { 
    $('input[placeholder]').focus(function() { 
     if (!$(this).val()) $(this).val(''); 
    }); 
}); 

Answer 5

ho scritto this example che ho per la mancanza di un nome cd migliori segnaposto persistenti.

Richiede un po 'più di markup, un div avvolgendo un label e input, ma che risolve un sacco di altri problemi (come segnaposto entrare nel vostro dati del modulo o campi di password non funzionanti) e il margine di profitto reale è molto pulito da leggere . Si finisce con qualcosa di simile:

<div class="input-wrapper"> 
    <label for="id_username">Username</label> 
    <input id="id_username" type="text" name="username"> 
</div> 

e dopo aver incluso CSS e JS, funziona.