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

Quelle est la meilleure façon d'avoir un champ de saisie de texte qui affiche les instructions de ce que d'entrer dans ce domaine en gris. Lorsque vous vous concentrez sur ce champ de saisie, le gris du texte d'instruction disparaît et votre entrée de texte s'affiche en noir. Si vous effacez les données de votre entrée de texte et de se concentrer à l'écart à partir de cette entrée, puis l'instruction gris texte réapparaît.

J'ai essayé de mise en œuvre de ce avec jQuery, mais je reçois toutes sortes de problèmes bizarres avec les différents navigateurs. Parfois, lorsque vous revenez en arrière d'un écran, le texte d'instruction devient noir et ne disparaît plus, des questions comme ça.

Est-il un standard de la bibliothèque javascript pour cela? Je ne trouve pas de!

Oh, et le texte d'instruction ne peut pas être une image, car elle doit être disponible en plusieurs langues selon le navigateur, la langue de préférence.

source d'informationauteur at.

  1. 7

    Vous pouvez utiliser filigrane plugin jquery.utilisation cette lien.

    exemple

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

    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, puis il va travailler dans tous les navigateurs.

  3. 2

    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');
    };
  });​
});

    démo

  4. 0

    Faire l'entrée transparent et mettre le texte derrière elle. Vérifier la valeur onload, onblur de décider si le texte doit être visible ou non. Rendre invisible onfocus.

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

  6. 0

    espace réservé le nom de code

    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(""); 
     } 
 });

    LE LIEN DE DÉMONSTRATION

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