js之搜索框

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

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input class="i1" type="text" value="提示信息" onfocus="hide(this)" onblur="show(this)">

     <style>

         .i1{

             color: gray;

         }

     </style>

     <script type="text/javascript">

         function hide(ths) { //隐藏提示信息，样式去掉

             ths.value = '';

             ths.className = '';

         }

         function show(ts) { //如果没输入任何内容或者搜索框空时，添加提示信息和样式

             var cont = ts.value;

             if (cont == '提示信息' || cont.trim().length == 0){

                 ts.value = '提示信息';

                 ts.className = 'i1';

             };

         }

     </script>

 </body>

 </html>

相关文章