游標聚焦事件—搜尋框例項
阿新 • • 發佈: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>
效果: