Javascript text input fields that display instruction (placeholder) text

Question

What\'s the best way to have a text input field that displays instructions of what to enter in that field in gray. When you focus on that input field, the gray instruction text

Answer 1

Look at this one: http://fuelyourcoding.com/scripts/infield/

Answer 2

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

Answer 3

placeholder code - name

name of the variable is,

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

Answer 4

Make the input transparent and put the text behind it. Check the value onload, onblur to decide if the text should be visible or not. Make it invisible onfocus.

For example: http://dorward.me.uk/tmp/label-work/example.html (you just need to style the label and input with different foreground colours)

Answer 5

You can use watermark plugin in jquery.use this link.

example

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

Answer 6

You don't need javascript for this.

HTML5:

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

This works in modern browsers. If you add modernizr.js to your page then it'll work in all browsers.