js之搜尋框

飛鳥_山東發表於2019-01-01
JS

目標效果：點選搜尋框，搜尋框內提示資訊消失，可輸入搜尋資訊，點選搜尋框外搜尋框如果沒提示資訊或者為空時，顯示搜尋框提示資訊，如果有搜尋資訊，顯示搜尋資訊。

程式碼如下：

 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>

 

相關文章