欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js之搜索框

程序员文章站 2022-05-03 11:43:50
目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息。 代码如下: ......

目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息。

代码如下:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>title</title>
 6 </head>
 7 <body>
 8     <input class="i1" type="text" value="提示信息" onfocus="hide(this)" onblur="show(this)"> 
 9     <style>
10         .i1{
11             color: gray;
12         }
13     </style>
14     <script type="text/javascript">
15         function hide(ths) { //隐藏提示信息,样式去掉
16             ths.value = '';
17             ths.classname = '';
18         }
19         function show(ts) { //如果没输入任何内容或者搜索框空时,添加提示信息和样式
20             var cont = ts.value;
21             if (cont == '提示信息' || cont.trim().length == 0){
22                 ts.value = '提示信息';
23                 ts.classname = 'i1';
24             };
25         }
26     </script>
27 </body>
28 </html>