et la valeur la décoloration textarea

Je veux être en mesure de faire quelque chose commeet la valeur la décoloration textarea

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

Et le titre sera automatiquement fondu et vous en tant que la valeur du champ, contrairement à la « recherche » ici en stackoverflow (à droite sur le haut, il se fane seulement).

Je pourrais venir avec un javascript et utiliser onblur et onfocus, mais ce serait gênant et j'espère inutile. De préférence, je ne définirais qu'une seule fonction pour chaque INPUT et TEXTAREA dans un fichier donné, donc tout ce que je dois faire est de configurer son title.

Première question: quel est le nom?

Question principale: Quelqu'un at-il une bonne solution? Qu'en est-il avec aucun jquery? Peut-être y a-t-il un moyen de le faire avec CSS3 seulement, bien que j'en doute ...

Source

2010-08-25 cregox

Je pense que le principal problème sera de vérifier s'il y a du texte tapé par l'utilisateur dans le champ. CSS ne peut pas faire une instruction if pour vérifier si le contenu du champ de saisie est le texte par défaut (si oui: vide) ou typé par l'utilisateur (ne le videz pas pour l'amour des dieux ou ils devront tout taper à nouveau chaque fois) ... Je ne pense pas que cela puisse être fait avec CSS –

@Litso Je ne pense pas non plus, mais ce serait ma première option. La seconde viendrait du javascript, et j'utiliserais plutôt jquery que de parcourir manuellement tous les champs. – cregox

Si ça ne vous dérange que si vous travaillez dans des navigateurs plus récents, vous pouvez utiliser le placeholder attribute dans le champ de texte, pour fournir un espace réservé disparaît lorsque vous vous concentrez et réapparaissez lorsque vous flouez. Vous pouvez trouver plus d'informations dans Dive Into 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 ajouter les gestionnaires onfocus et onblur à chacun de ceux utilisant DOM events.

Source

2010-08-25 19:52:53

oh mec, je devrais vraiment commencer à lire dans html5 plus. –

merci Brian, c'est parfait. tout ce que je voulais savoir! - en fait, maintenant je veux juste savoir s'il y a un tag ou un moyen d'unifier "placeholder", "title" et "alt", car ils sont tous deux des attributs de description et portent généralement la même valeur. : P – cregox

placeholder est évidemment juste un espace réservé. Le titre est utilisé pour fournir des informations sur le but ou la destination du formulaire/lien/image. Alt est uniquement utilisé pour les images pour remplacer l'image si un navigateur ne peut pas le charger. Un texte alt est généralement de nature brève et descriptive, tandis que le titre peut contenir des informations plus détaillées ou triviales. –

Ok, grâce à la réponse parfaite de Brian, c'est le code que j'ai trouvé. Ç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 le 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 retirer des navigateurs compatibles HTML5. L'attribut placeholder va juste fonctionner sur HTML5.

Source

2010-08-25 21:25:59 cregox

et la valeur la décoloration textarea

Répondre

Questions connexes