Text Box get focus and lose focus

Today, I would like to introduce two ways to get focus and lose focus in the text box:

First: html5

Html5 adds several new attributes to the form text box, such as email, tel, number, time, required, autofocus, and placeholder. These attributes greatly change the form effect.

Placeholder is one of them, which can get the focus and lose the focus in the text box at the same time. Make sure that the value of input is null. The content of placeholder is what we see on the page.

The Code is as follows:

<Input type = "text" value = "" placeholder = "Enter the content"/>

 

Type 2: jQuery

Principle: Make the val value of the form equal to the title value.

The Code is as follows:

<Input type = "text" value = "" title = "Enter content"/>

 

1 <script type = "text/javascript">
2 $ (function (){
3 var $ input = $ ("input ");
4
5 $ input. each (function (){
6 var $ title = $ (this). attr ("title ");
7
8 $ (this). val ($ title );
9
10 $ (this). focus (function (){
11 if ($ (this). val () ===$ title ){
12 $ (this). val ('');
13}
14 })
15
16. blur (function (){
17 if ($ (this). val () = ""){
18 $ (this). val ($ title );
19}
20 });
21 });
22 });
23 </script>