JS Production Click the input box when the default text disappears effect _ text effects

In order to improve user experience and ease of use, some designers will optimize the things that users in the Web page often do, such as input boxes. How is the general input box optimized? From the user experience point of view, simplifying the user to use the steps to make users more convenient is to improve usability, such as when the mouse hover in the input box to change the color of the input box, automatically select the default text in the input box, or click the input box automatically clear the default content and so on. The effect sounds complicated, but it is simple to do, as long as a small piece of JavaScript code can be solved. To introduce the code of several effects:

1. Click on the input box to select the content of the HTML code:

<form id= "Form1" Name= "Form1" method= "Post" action= "" > 
<label for= "TextField" > Input:</label> 
<input name= "TextField" type= "text" id= "TextField" value= "Dreamweaver" onfocus= "This.select" () 
/> </form>

2. Change the border or background color when the mouse hovers over the input box

There are two ways to do this: one is to use the pseudo elements in CSS: focus; method two or use a small piece of JavaScript; The HTML code for method one is the same as in the previous example, except that the following paragraph is added to the CSS:
Input:hover {border:1px solid #F00;}
When the mouse hovers over the input box, the input box border becomes red, but this method is only valid in Firefox browser and IE7 version, IE6 not supported, so it has some limitations. The code for method two is mostly the same as in the previous example, except to add a section of the mouse-hover code later:

<form id= "Form1" Name= "Form1" method= "Post" action= "" > 
<label for= "TextField" > Input:</label> 
<input name= "TextField" type= "text" id= "TextField" value= "Dreamweaver" "onfocus=" This.select () "Onmouseover=" This.style.bordercolor= ' #FF6600 ' "onmouseout=" this.style.bordercolor= ""/> 
</form>

With this code, most browsers can support it.
3. Click the default text in the input box to disappear
There is also an effect, when the mouse clicks the input box, the original default text disappears. If you enter another new content, and then remove the mouse, the input box new content does not change, if you do not enter new content, the mouse left the input box and restore the default text. This effect can be done only by adding a small section of JavaScript judgment:

<form id= "Form1" Name= "Form1" method= "Post" action= "" >
<label for= "TextField" > Input:</label> 
<input name= "TextField" type= "text" id= "TextField" value= "Dreamweaver" "onmouseover=" this.style.bordercolor= ' #FF6600 ' "onmouseout=" this.style.bordercolor= ' "onfocus=" if (value = = ' Dreamweaver ') {value = '} ' onblur= ' if (value = = ') {value= ' Dreamweaver '} '/> 
</form>

<textarea class= "Fankui_textarea" onfocus= "if" (value = = ' Your suggestion, we carefully adopt; your criticism, we listen attentively; Please describe your proposal or the problem you are experiencing in detail. ' {value = '} ' onblur= ' if (value = = ') {value= ' your suggestion, we carefully accept; your criticism, we listen attentively; Please describe your proposal or the problem you are experiencing in detail. '} ' > your suggestions, we carefully adopt; your criticism, we listen attentively; Please describe your proposal or the problem you have encountered in detail. </textarea>

All three of these effects are simpler JavaScript applications.