We will be needing a js file and a page containing form input field to do this task. What we are planning to do is, The input field contains default value. Onclick default value disappears and allows the user to insert text. If the user types anything it remains there but if he does not write anything and clicks at next input field than the default value reappears in previous field.
JS file Code:
function remName(a, b){ if(a.value==b){ a.value=''; }else if(a.value==''){ a.value=b; }else{ a.value=a.value; } } function chkName(a, b){ if(a.value==''){ a.value=b; }else{ a.value=a.value; } }
Two functions are controlling the event as above. Call the js file in the page and define input fields and put some code like this.
Input Fields:
<input name="txtName" type="text" id="txtName" onfocus="remName(this, 'Name');" onblur="chkName(this, 'Name');" value="Name"> <input name="txtEmail" type="text" id="txtEmail" value="Email" onfocus="remName(this, 'Email');" onblur="chkName(this, 'Email');">
Grzesiek Says:
thanks, helpful
Soeren Says:
You don’t even need all that complicated stuff. You don’t even need a javascript file. Here is a much easier way.
That’s all you need, and it does the exact same thing.
Luke Says:
I also found this helpful. But how can I change the value color to grey and italic, then change it to normal when the user enters their text?