游標聚焦事件—搜尋框例項
阿新 • • 發佈：2018-11-10
要點：
1. .onfocus事件是游標聚集響應的事件 .onblur是焦點失去事件
2. 注意游標聚焦時，將提示內容去掉，並將字型的前景色改為黑色，和使用者輸入顏色上作區分，在改回提示內容時，將前景色改為灰色
html和內建的js程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" value="請輸入搜尋內容" id="text"> <script type="text/javascript"> function my$(id){ return document.getElementById(id); } my$("text").onfocus=function(){ if (this.value=="請輸入搜尋內容") { this.value=""; this.style.color="black"; } // 判斷焦點聚集時，如果內容為請輸入搜尋內容，將提示內容 // 清除並且將文字內容的前景色改為黑色 } my$("text").onblur=function(){ if(this.value==""){ this.value="請輸入搜尋內容"; this.style.color="gray"; } // 當失去焦點時，判斷搜尋框內部是不是空，如果為空就是點選了 // 但是沒有點選搜尋，就還原原來的狀態 } // 同時，這個案例思路可以將前面寫的一個事件控制div的顯示與隱藏改變一下 // 同時，判斷是否輸入了搜尋內容，可以用 this.value.length == 0 代替，因為這樣速度更快 </script> </body> </html>
效果：
