Hide/Show text when input field gets/loses focus (jquery version)

The input box hides or displays text when it Gets or loses focus, so the focus effect is that many friends have seen it when filling out form forms, this article uses jquery to achieve the following, interested friends can refer to ha

Everyone can look at the search input box, the default display "user name/email" prompt, when the input box to get the focus, automatically empty waiting for user input, when the user did not enter anything to leave the input box, the input box again displays "User name/email" prompt. Isn't it common? Many search, login, form will use this effect, but I see more than n sites, more than 90% is so implemented:

<input type="text" value=" search keyword " onfocus="  if (this.value = = ' search keyword ') this.value = '"" onblur="if (this.value = =") this.value = ' Search keyword ' /c10>"

I am very opposed to writing JavaScript in HTML tags, and this style is written in the HTML tag, although it does not violate the standards, but it is not recommended to write. Because:
1. There is no reusability at all, if it is a form, a lot of input boxes, each need this effect, then each of them so deal with it?
2. If you want to modify the hint text, it is laborious and difficult to maintain.
3. We advocate the separation of structure (HTML), performance (CSS), and Behavior (JavaScript), which is a good page.
How to write to achieve this effect, and both reusability, and good maintenance, and do not need to put JS into the HTML it?
Here's how:
The first must be the introduction of jquery
HTML code:

<div><input type="text" value=" hint test "class ="input_test" /></div> <div><input type="text  " value=" Please enter the search key "class="input_test "

jquery Code:

<script type="Text/javascript"Src="Http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="Text/javascript">$ (function () {$ ('. Input_test'). Bind ({focus:function () {if( This. Value = = This. DefaultValue) {  This. value=""; } }, Blur:function () {if( This. Value = =""){  This. Value = This. DefaultValue;} } }); }) </script>

As long as you add "input_test" to the input field of the implementation, you can easily implement the

The

Input input box hides/displays text when it gets/loses focus (jquery version)