JS mouse click on the text box empty default value, leave the text box Restore Defaults

When using a text box, if the initial value is set, select the text box to enter the time you want to delete the original content, it will become very troublesome

When the corresponding onfocus and onblur can trigger two events in the text box attribute definition js function

 

The following code as an example to asp.net　　

 

Text box control settings:

Within the onfocus and onblur attributes can be set up

A parameter control itself is passed, the default parameters are passed 2 value of the control text

. 1 <ASP: the TextBox ID = " Material_No " the onfocus = " onFocusFun (the this, 'enter the item number') " the onblur = " onblurFun (the this, 'enter the item number') " 
2                          the runat = " Server " the AutoPostBack = " True " OnTextChanged = " Material_No_TextChanged " > enter number </ asp: TextBox>

 

js code to achieve:

If the user does not enter anything, cancel the Default Font color will become red restoration of the selection (specific color can be adjusted)

1  // Clear default content when clicking the input box 
2          function onFocusFun (Element, elementValue) {
 . 3              IF (element.value == elementValue) {
 . 4                  element.value = "" ;
 . 5                  element.style.color = "" ;
 . 6              }
 7          }
 8          // leave input box, if the input is empty restore the default content 
. 9          function onblurFun (Element, elementValue) {
 10              IF (element.value == '' ) {
 . 11                  element.style.color = "# F40" ;
 12                  element.value =elementValue;
13              }
 14          }

 

effect:

1. Default state

 

2. Select the state

 

 3. Enter empty, restore state