Quelle est la meilleure façon d'avoir un champ de saisie de texte qui affiche des instructions sur ce qu'il faut entrer dans ce champ en gris. Lorsque vous vous concentrez sur ce champ de saisie, le texte de l'instruction grise disparaît et votre texte de saisie apparaît en noir. Si vous effacez votre texte d'entrée et que vous vous concentrez loin de cette entrée, le texte gris de l'instruction réapparaît.Champs de saisie de texte Javascript qui affichent le texte d'instruction (espace réservé)

J'ai essayé d'implémenter ceci avec jQuery, mais j'obtiens toutes sortes de problèmes bizarres avec différents navigateurs. Parfois, lorsque vous revenez sur un écran, le texte d'instruction devient noir et ne disparaît plus, des problèmes comme celui-là.

Existe-t-il une bibliothèque javascript standard pour cela? Je n'en trouve pas! Oh, et le texte d'instruction ne peut pas être une image car il doit être disponible dans différentes langues en fonction des préférences linguistiques du navigateur.

2010-08-10 at.

Vous pouvez utiliser le plugin filigrane lien jquery.use this.

exemple

$(this).Watermark("your instructions");

Source

2010-08-10 05:29:07

C'est parfait, merci! –

-2

<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''">

Source

2010-08-10 05:27:17 ppshein

Ce manque la plupart des exigences de la question et a des problèmes d'accessibilité. – Quentin

Cela ne fonctionnera pas. Parce que, après que vous vous concentriez sur ce champ, le texte d'instruction disparaît à jamais –

Désolé, les gars. Je pense que le mauvais chemin. – ppshein

Rendre l'entrée transparente et placer le texte derrière. Vérifiez la valeur onload, onblur pour décider si le texte doit être visible ou non. Rendre invisible onfocus.

Par exemple: http://dorward.me.uk/tmp/label-work/example.html (il vous suffit de style l'étiquette et l'entrée avec les différentes couleurs de premier plan)

Source

2010-08-10 05:27:30 Quentin

J'aime cette idée. Le texte d'instruction est également indexable, ce qui est logique. Je suis allé avec le plugin jQuery filigrane mais parce que c'était si simple et fait le html si propre. Pour tout ce que je sais, ils ont mis en œuvre cela avec le même mécanisme .. –

html

<input type="text" id="user" class="textbox default" value="Enter login name"> 
<input type="password" id="pass" class="textbox">

jQuery

$(function(){ 
    $('.textbox').focus(function(){ 
    if (this.value == this.defaultValue) { 
     this.value = ''; 
     $(this).removeClass('default'); 
    }; 
    }).blur(function(){ 
    if (this.value == '') { 
     this.value = this.defaultValue; 
     $(this).addClass('default'); 
    }; 
    }); 
});

demo

Source

2010-08-10 05:35:38 Reigel

Regardez celui-ci: http://fuelyourcoding.com/scripts/infield/

Source

2010-09-06 22:19:05

aime la décoloration!peut-être je vais regarder dans ce plus tard –

Vous n'avez pas besoin de javascript pour cela.

HTML5:

<input type="text" id="email" name="email" placeholder="Enter your email address">

Cela fonctionne dans les navigateurs modernes. Si vous ajoutez modernizr.js à votre page, cela fonctionnera dans tous les navigateurs.

Source

2011-08-19 13:53:03 autonomatt

Si je comprends bien, modernizr ne détecte que si une fonctionnalité html5 comme placeholder existe dans le navigateur actuel. C'est à vous de fournir un mécanisme de secours. La bibliothèque jquery ci-dessus que j'ai choisi comme réponse correcte utilise l'attribut d'espace réservé de html5 (si vous voulez) et revient à leur mécanisme javascript. –

code espace réservé - Nom

nom de la variable est,

var name=$("#con-name"); 
var nameval="Enter your name"; 



name.val(nameval); 
name.focus(function(){ 
    if (this.value == nameval) { 
     this.value = ''; 
    }; 
    }).blur(function(){ 
     if (this.value == '') {  
     this.value = nameval; 
    }; 
}); 
//submit to clear code 
$("#sub_con_page").click(function() { 
    if(name.val()==nameval) { 
     name.val(""); 
    } 
});

DEMO LINK

Source

2012-06-11 06:19:45 ShivarajRH

Champs de saisie de texte Javascript qui affichent le texte d'instruction (espace réservé)

Répondre

html

jQuery

demo

Questions connexes