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

Posted 2020-11-19 topzhao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两种方法实现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;width: 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>

效果如下图：

技术分享图片

以上是关于两种方法实现text输入框中“请输入关键字”的提醒的主要内容，如果未能解决你的问题，请参考以下文章

实现搜索功能