JavaScript搜尋框提示文字
通常搜尋框裡面都有一定的提示文字,下面就通過程式碼例項介紹一下如何用原生javascript實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> input{color:red} </style> <script type="text/javascript"> function iniEvent(){ var txtSearch=document.getElementById("txtSearch"); txtSearch.onfocus=function(){ if(this.value=="請輸入關鍵字" || this.value==""){ this.value=""; this.style.color="black"; } } txtSearch.onblur=function(){ if(this.value=="請輸入關鍵字" || this.value==""){ this.value="請輸入關鍵字"; this.style.color="red"; } } } window.onload=function(){ iniEvent(); } </script> </head> <body> <input type="text" id="txtSearch" value="請輸入關鍵字"/> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).function iniEvent(){},此方法實現了此功能。
(2).var txtSearch=document.getElementById("txtSearch"),獲取文字框元素物件。
(3).txtSearch.onfocus=function(){
if(this.value=="請輸入關鍵字" || this.value==""){
this.value="";
this.style.color="black";
}
}為文字框註冊onfocus事件處理函式。
如果當前文字框的value值等於"請輸入關鍵字"的時候或者值等於空的時候,就把文字框內容清空,其實第二個條件可以省略。
並且將字型顏色設定為黑色。
(4).txtSearch.onblur=function(){
if(this.value=="請輸入關鍵字" || this.value==""){
this.value="請輸入關鍵字";
this.style.color="red";
}
else{
this.style.color="black";
}
},為文字框註冊onblur事件處理函式。
如果文字框的內容為"請輸入關鍵字"(這個可以省略)或者空的話,就將文字框的值設定為"請輸入關鍵字"。
否則的話將字型顏色設定為黑色。
二.相關閱讀:
(1).onfocus事件可以參閱javascript focus事件一章節。
(2).onblur事件可以參閱javascript blur事件一章節。
相關文章
- javascript input文字框新增提示文字效果JavaScript
- JavaScript仿新浪微博搜尋框功能JavaScript
- 搜尋框帶有搜尋提示點選消失程式碼例項
- jquery搜尋下拉提示框/登陸賬號下拉提示框jQuery
- js之搜尋框JS
- 搜尋框佈局
- jQuery搜尋框關鍵字自動匹配提示詳解jQuery
- JavaScript文字框事件JavaScript事件
- JavaScript 文字框事件JavaScript事件
- jQuery 伸縮搜尋框jQuery
- 直播開發app,實時搜尋、搜尋引擎框APP
- Jquery + Bootstrap 實現搜尋框jQueryboot
- Windows10搜尋框怎麼關閉_Win10如何關閉搜尋框WindowsWin10
- iOS 文字提示框封裝iOS封裝
- 實現textarea文字框多行提示文字效果
- Nebula 基於 ElasticSearch 的全文搜尋引擎的文字搜尋Elasticsearch
- 前端實時搜尋框模擬前端
- 搜尋框或者UITextField使用ReactiveCocoaUIReact
- TextView搜尋文字高亮顯示TextView
- 直播app原始碼,預設顯示搜尋框 保留搜尋條件APP原始碼
- win10搜尋框怎麼縮小_win10工作列搜尋框太寬如何調Win10
- win10搜尋框太長如何縮小_win10縮小搜尋框的步驟Win10
- win10怎麼關閉工作列搜尋框 win10 工作列取消搜尋框方法Win10
- JavaScript獲取input text文字框JavaScript
- JavaScript 禁用表單 所有文字框JavaScript
- 點選文字框刪除提示文字效果程式碼
- Android--自動搜尋提示Android
- win10 工作列怎麼取消搜尋框_win10工作列搜尋框怎麼關掉Win10
- win10 搜尋框怎麼去掉工作列_win10工作列搜尋框怎麼關掉Win10
- win10搜尋框卡死怎麼辦_win10搜尋框卡死無法使用如何解決Win10
- Linux vim 搜尋文字的方式Linux
- HHDESK檔案內文字搜尋功能
- 密碼框提示文字程式碼例項密碼
- Win10如何取消工作列搜尋框_W10系統怎樣取消工作列的搜尋框Win10
- win10搜尋框如何放到cortana裡_window10的搜尋框怎麼放到小娜cortana裡Win10
- 通過Observable解決搜尋框問題
- div css搜尋框效果程式碼例項CSS
- 美觀的搜尋框程式碼例項