搜索引擎點擊隱藏文字
阿新 • • 發佈：2017-07-02
... spa utl order 焦點 code blur text png
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 input, 9 button { 10 padding: 0; 11 border: 0 none; 12 outline-style: none;13 } 14 .search { 15 width: 258px; 16 height: 40px; 17 background-color: gray; 18 margin: 100px auto; 19 20 } 21 .search #txt { 22 float: left; 23 width: 208px; 24 height: 40px;25 background: url(images/left.jpg) no-repeat; 26 padding-left: 8px; 27 color: #ccc; 28 } 29 .search button { 30 float: left; 31 width: 42px; 32 height: 40px; 33 background: url(images/right.jpg) no-repeat; 34} 35 36 </style> 37 38 <script> 39 window.onload = function () { 40 function $(id){ 41 return document.getElementById(id); 42 } 43 // 獲取焦點 44 $("txt").onfocus = function () { 45 if($("txt").value == "請輸入..."){ 46 $("txt").value = ""; 47 $("txt").style.color = "#333"; 48 } 49 } 50 $("txt").onblur = function () { 51 if($("txt").value == ""){ 52 $("txt").value = "請輸入..."; 53 $("txt").style.color = "#ccc"; 54 } 55 } 56 57 58 } 59 </script> 60 <body> 61 <div class="search"> 62 <input type="text" id="txt" value="請輸入..."/> 63 <button></button> 64 </div> 65 </body> 66 </html>
搜索引擎點擊隱藏文字