Form Input Fields, OnClick OnBlur OnFocus Events Text Change

The section contains stuff related to the HTML/DHTML/XHTML for Web Page Development.

Form Input Fields, OnClick OnBlur OnFocus Events Text Change

Postby decentdeveloper on March 11th, 2008, 8:49 am

You may have seen input boxes where when you click in, the default value given in box disappears, but it reappears when you loose focus from input field. But when you type in the field and loose focus of input, new value remains there:

Here is the little trick

We will be needing a js file and a page containing form input field to do this task.
What we are planning 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:

Code: Select all
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:

Code: Select all
<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');">
decentdeveloper
 
Posts: 3
Joined: March 11th, 2008, 8:00 am

Return to HTML / DHTML / XHTML

Who is online

Users browsing this forum: No registered users and 0 guests