两种方法实现text输入框中“请输入关键字”的提醒

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="margin: 0 auto; 600px">
 9 <input id="i1" type="text" onfocus="Focus()" onblur="Blur()"  value="请输入关键字"/>
10 <input type="text" placeholder="请输入关键字">
11 </div>
12 
13 
14 <script>
15 
16     function Focus() {
17         var tag = document.getElementById('i1');
18         var  val =tag.value;  // 获取text中的值
19         if(val=="请输入关键字"){
20             tag.value='';
21         }
22     }
23     
24     function Blur() {
25         var tag = document.getElementById('i1');
26         var val = tag.value;
27         if(val.length==0){//判断长度是不是0
28             tag.value="请输入关键字"
29         }
30     }
31 
32 </script>
33 
34 </body>
35 </html>
效果如下图：