如何實現點選文字框刪除提示文字效果
大家可能都遇到這樣的情況,在帶有搜尋功能的網站中,一般都在搜尋框都帶有預設的提示語句,當使用者點選獲得焦點的時候,搜尋框中的文字就會被刪除,滑鼠點選他出,失去焦點的時候,文字框中又會出現預設的提示語句。下面就通過例項簡單介紹一下如何實現此功能。程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ jQuery.focusblur=function(focusid){ var focusblurid=$(focusid); var defval=focusblurid.val(); focusblurid.focus(function(){ var thisval = $(this).val(); if(thisval==defval) { $(this).val(""); } }); focusblurid.blur(function(){ var thisval = $(this).val(); if(thisval=="") { $(this).val(defval); } }); }; $.focusblur("#searchkey"); }); </script> </head> <body> <form action="#" method="post" name="myform"> <input name="mytext" type="text" value="輸入搜尋關鍵詞" id="searchkey"/> <input type="submit" id="searchbtn" value="搜尋"/> </form> </body> </html>
以上程式碼成功實現了想要的功能。實現的方式也非常簡單,實現主要步驟如下:
首先,建立一個函式,此函式可以為指定id的物件繫結事件處理函式,事件處理函式定義了當文字框獲得焦點和失去焦點時的文字內容,然後再將此函式賦值給jQuery的focusblur屬性,最後當文件載入就緒後執行focusblur()方法為id為searchkey的文字框繫結事件處理函式。以上即是此功能的簡單實現過程。
相關文章
- 點選文字框刪除提示文字效果程式碼
- 實現textarea文字框多行提示文字效果
- javascript input文字框新增提示文字效果JavaScript
- 點選刪除按鈕彈出是否刪除提示框
- js點選文字框選中文字效果程式碼例項JS
- javascript實現的點選彈出刪除提示框程式碼例項JavaScript
- 如何實現點選文字框清除其中文字
- 點選文字框實現文字框內容選中效果
- 密碼框提示文字效果程式碼例項密碼
- javascript實現點選彈出確認刪除警告框程式碼JavaScript
- 點選刪除彈出提示是否刪除程式碼
- js新增刪除文字框JS
- 實現密碼框預設文字效果例項程式碼密碼
- 如何實現點選文字清除預設文字
- 妙用 background 實現花式文字效果
- js實現文字框提示程式碼例項JS
- 如何使用angularjs實現文字框獲取焦點AngularJS
- 點選方向鍵實現文字框焦點切換程式碼例項
- Element 利用Tooltip提示框實現動態顯示文字提示
- jQuery實現文字框獲取焦點jQuery
- JS如何實現點選複製功能,JS點選複製文字JS
- jquery刪除記錄彈出提示框jQuery
- 原生js多選框選中排序及刪除JS排序
- 滑鼠懸浮於連結<a>之上出現提示文字效果程式碼
- 實現文字框輸入內容提示程式碼例項
- Windows10系統中刪除檔案沒有彈出刪除提示框如何解決Windows
- 如何實現點選文字也能夠選中核取方塊
- 文字框點選清除預設文字例項程式碼
- jQuery中點選刪除,顯示是否要刪除jQuery
- 點選按鈕實現文字框數字增加或者減少程式碼例項
- JavaScript搜尋框提示文字JavaScript
- 點選當前文字行實現文字變色效果
- 如何使用angularjs實現文字框設定值AngularJS
- 點選按鈕複製文字框文字程式碼例項
- css如何給文字新增刪除線CSS
- Android列表實現單選、多選、全選、取消、刪除Android
- 文字框輸入內容實現智慧提示效果程式碼例項
- JavaScript新增一個文字框並帶有刪除按鈕JavaScript