Text as a place to enter a text field?

Question

I notice that on some websites, such as http://academia.edu/ , the registration form has its own "place-holder" in the text input field. Thus, there is no shortcut in the text box, but there is rather a small word "Name" in the text box.

When using Firebug for research, I see the following code:

<input class="standard_text magic-default magic-default-on" id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name"> 

It seems like some kind of “magical” javascript is happening behind the scene. But since I am not familiar with javascript debugging yet, I cannot determine how they do it.

Does anyone know how to produce this effect?

Answer 1

For modern browsers, you can use the HTML5 placeholder attribute.

This will cause you to end without Javascript and scale (will not do anything) in older browsers.

 <input placeholder="First Name"> 

To get this working in older browsers, you can enable a bit of jQuery:

 $('input:text').focus(function(){ if ( $( this ).val () === $( this ).attr ( 'placeholder' ) ) { $(this).val(''); } }).blur(function(){ if($(this).val() == "") { $(this).val($(this).attr('placeholder')) } } ); 

Working example

Answer 2

You need to create an onFocus event handler for the input field and clear the value of the specified input field. By default, you only clear the value if it is the default ("Name" in your example), so you don’t clear all the entries that the user entered if he returns to the input later.

You can also connect the onBlur event handler and restore the input field to the default value (if the user did not enter anything).

Answer 3

 <input id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name" onFocus="inputFocus('First Name', this)" onBlur="inputBlur('First Name', this)"> <script type="text/javascriptt"> function inputFocus(ph, el){ if(el.value == ph) el.value = ""; } function inputBlur(ph, el){ if(el.value == "") el.value = ph; } </script> 

Answer 4

HTML5 placeholder is what you are looking for:

http://diveintohtml5.info/forms.html

In your case, it will be:

 <input name="firstname" placeholder="First name"> 

But you can do it 100% with javascript:

http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/