étiquettes dans la zone de texte

Question

<input name="textbox" type="text" value="Click here to type" onfocus="if(this.value=='Click here to type')this.value='';" onblur="if(this.value=='')this.value='Click here to type';"> 

.. confocus/onblur travail sur les champs de texte mais pas sur les éléments textarea. Y at-il une solution de contournement, en utilisant jQuery peut-être?

Answer 1

<textarea onfocus="if(this.value=='Click here to type')this.value='';" onblur="if(this.value=='')this.value='Click here to type';">Click here to type</textarea> 

Works pour moi.

Peut échouer si vous mettez des nouvelles lignes/espaces supplémentaires dans la valeur bien sûr.

Answer 2

Watermark plugin for jQuery.

Ce plugin jQuery simple à utiliser ajoute capacité de filigrane à HTML entrée et éléments textarea.

Ce plugin vous permet de spécifier le texte qui sera utilisé pour le filigrane, et éventuellement vous pouvez fournir votre propre nom de classe CSS qui sera appliqué à l'élément d'entrée ou textarea chaque fois le filigrane est illustré .

Si vous ne fournissez pas votre propre nom de classe , le nom de classe "filigrane" est utilisé.

En outre, ce plugin vous permet de modifier le texte en filigrane et/ou classe nom à tout moment après le filigrane est initialisés.

Le plugin est également capable de afficher un filigrane dans des éléments d'entrée mot de passe , montrant le filigrane en texte brut, mais le passage à mot de passe en mode protégé (obscurci) lorsqu'elle se concentre. (En raison de la complexité de faire un mot de passe filigranes fonctionnent, il est recommandé que d'éviter des changements de programmation à des éléments d'entrée mot de passe .)

Nouvelle pour la version 3.0, le plugin peut gérer également des éléments d'entrée de type = "recherche" (navigateurs WebKit), et il prend en charge le glisser-déposer à éléments filigranés, prise en charge native navigateur (lorsque disponible).

Answer 3

Les onfocus et onblur événements fonctionnent sur tous les éléments de formulaire et points d'ancrage, vous pouvez juste essayer de faire votre input un textarea, et cela fonctionnera, mais je vous encourage à faire votre événement de liaison par programmation.

Quelque chose comme ceci:

var textarea = document.getElementById('textareaId'), 
    message = 'Click here to type'; 

textarea.value = message; // set default value 

textarea.onfocus = textarea.onblur = function() { 

    if (this.value == '') { 
    this.value = message; 
    } else if (this.value == message) { 
    this.value = ''; 
    } 
}; 

Essayez l'exemple ci-dessus here.

jQuery version:

$(function() { 
    var message = 'Click here to type'; 

    $('#textareaId').val(message); // set default value 

    $('#textareaId').bind('focus blur', function() { 
    var $el = $(this); 
    if ($el.val() == '') { 
     $el.val(message); 
    } else if ($el.val() == message) { 
     $el.val(''); 
    } 
    }); 
});