js之搜索框
程序员文章站
2022-10-31 09:38:54
目标效果：点击搜索框，搜索框内提示信息消失，可输入搜索信息，点击搜索框外搜索框如果没提示信息或者为空时，显示搜索框提示信息，如果有搜索信息，显示搜索信息。 代码如下： ......
目标效果：点击搜索框，搜索框内提示信息消失，可输入搜索信息，点击搜索框外搜索框如果没提示信息或者为空时，显示搜索框提示信息，如果有搜索信息，显示搜索信息。
代码如下：
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>
下一篇： win10系统QQ语音声音太小该怎么办?