Hide/display text when the input input box gains/loses focus (jquery version)_jquery

The input input box hides or displays text when it gains and loses focus. Let’s take a look at the rendering first.
The default state of the input box:

The input box gets focus state:

You can see the search input box in the rendering. The prompt "Username/Email" is displayed by default. When the input box gains focus, it will automatically clear and wait for user input. When the user enters nothing, he will leave the input box. , the prompt “Username/Email” is displayed again in the input box. Is it very common? Many searches, logins, and forms will use this effect, but I have looked at many websites, and more than 90% of them are implemented this way:

Copy code The code is as follows:

I am very opposed to writing javascript in html In the tag, this is the same as writing style in the html tag. Although it does not violate W3C standards, it is not recommended to write it this way. Because:
1. There is no reusability at all. If it is a form with many input boxes, and each one needs such an effect, should each one be treated in this way?
2. If you want to modify the prompt text, it is time-consuming, laborious and difficult to maintain.
3. We advocate the separation of structure (html), performance (css), and behavior (javascript). This is a good page.
So how do you write to achieve this effect, which is reusable and easy to maintain without writing js into html?
The specific method is as follows:
First of all, you must introduce jQuery
Html code:

Copy the code The code is as follows:

jQuery code:

Copy code The code is as follows:

You can easily implement it by adding the class "input_test" to the implemented input box
View: Demo