目標效果：點擊搜索框，搜索框內提示信息消失，可輸入搜索信息，點擊搜索框外搜索框如果沒提示信息或者為空時，顯示搜索框提示信息，如果有搜索信息，顯示搜索信息。 代碼如下： ...
目標效果：點擊搜索框，搜索框內提示信息消失，可輸入搜索信息，點擊搜索框外搜索框如果沒提示信息或者為空時，顯示搜索框提示信息，如果有搜索信息，顯示搜索信息。
代碼如下：
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>
