entrée et de la valeur d'évanouissement de la zone de texte

Question

Je veux être capable de faire quelque chose comme

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

Et l'auto volonté de titre effacent et vous en tant que la valeur du champ, contrairement à la « recherche » ici en stackoverflow (à droite sur le dessus, il se fanent seulement out).

Je pourrais venir avec un javascript et l'utilisation onblur et onfocus, mais ce serait gênant et j'espère inutile. De préférence, je trouve à une seule fonction pour chaque entrée et TEXTAREA dans ne importe quel fichier donné, donc tous besoin I de faire est mis en place son title.

Première question : quel est le nom de cette

Question principale : Quelqu'un at-il une bonne solution? Qu'en est-il sans jquery? Peut-être qu'il ya une façon de le faire avec CSS3 que, bien que je doute ...

Answer 1

Si vous êtes OK avec fonctionner uniquement dans les navigateurs plus récents, vous pouvez utiliser le Plongez au coeur de HTML5 .

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

Si vous voulez travailler dans les anciens navigateurs, vous aurez probablement à mettre en œuvre l'espace réservé vous-même, en JavaScript par exemple. Vous pouvez trouver tous vos éléments input et textarea en utilisant document.getElementsByTagName et ajoutez le onfocus et les gestionnaires de onblur à chacun de ceux qui utilisent événements DOM .

Answer 2

Ok, merci à réponse parfaite de Brian, voici le code que je suis venu avec. Ça m'a pris assez longtemps pour le faire fonctionner:

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

Il suffit de mettre à la fin de la forme, et vous devriez être bien. Et, s'il vous plaît, utilisez votre script côté serveur favori pour le supprimer de navigateurs compatibles HTML5. espace réservé attribut que le travail sur HTML5 .