input e textarea valore dissolvenza

Question

Voglio essere in grado di fare qualcosa di simile

<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>

E l'auto titolo svanirà e schienale in quanto il valore del campo, a differenza della "ricerca" qui a StackOverflow (a destra in alto, solo fade out).

ho potuto venire con un javascript e l'uso onblur e onfocus, ma che sarebbe stato problematico e spero inutili. Preferibilmente, avevo messo solo una singola funzione per ogni ingresso e TEXTAREA all'interno di un dato file, così tutto quello che dovete fare è impostare la sua title.

Prima domanda :? Qual è il nome di questo

questione principale : Chiunque ha una buona soluzione? Che dire senza jQuery? Forse c'è un modo per farlo con CSS3 solo, anche se ne dubito ...

Answer 1

Se siete male con solo lavorare in browser più recenti, è possibile utilizzare il placeholder attributo sul campo di testo, per la fornitura di un segnaposto che scompare quando ci si concentra e riapparire quando si sfocatura. Potete trovare alcune ulteriori informazioni in Dive Into HTML5 .

<input type="text" name="txtField" value="" placeholder="input your text" />

Se si desidera che il lavoro in browser più vecchi, probabilmente dovrete per l'attuazione del segnaposto da soli, in JavaScript per esempio. È possibile vedere tutti i vostri input e textarea elementi utilizzando document.getElementsByTagName e aggiungere il onfocus e gestori onblur a ciascuno di coloro che usano DOM eventi .

Answer 2

Ok, grazie alla perfetta risposta di Brian, questo è il codice mi è venuta. Ha preso me abbastanza a lungo per farlo funzionare:

<form>
  <input type="text" name="txtField" value="" placeholder="input your text" />
  <textarea name="areaField" placeholder="input your long text"></textarea>
</form>

<script type="text/javascript">
(function() {
    ie_placeholder(document.getElementsByTagName('input'));
    ie_placeholder(document.getElementsByTagName('textarea'));
    function ie_placeholder (fields) {
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            field.onfocus = function () {
                if (this.value == this.placeholder) {
                    this.style.color = '';
                    this.value = '';
                }
            };
            field.onblur = function () {
                if (this.value == '' && this.placeholder != null) {
                    this.style.color = 'silver';
                    this.value = this.placeholder;
                }
            };
            field.onblur();
        }
    }
})();
</script>

Basta metterlo nella fine del modulo, e si dovrebbe andare bene. E, per favore, utilizzare lo script lato server preferito per rimuovere questo dal browser compatibili HTML5. segnaposto attributo sarà solo il lavoro su HTML5 .