滑鼠點選輸入框文字消失怎麼辦

　　當我們對滑鼠進行特效裝飾的時候，卻發現滑鼠點選輸入框文字就消失了怎麼辦?下面是小編為大家介紹滑鼠點選輸入框文字消失的解決方法,歡迎大家閱讀。

　　滑鼠點選輸入框文字消失的解決方法

　　11.我們在充值繳費的時候，或者輸入使用者名稱密碼的時候，經常會見到如下的提示框

　　22.當你的滑鼠點選在“手機號碼輸入框”中的時候，輸入框中的“請輸入手機號碼”文字消失，取代的是滑鼠中的游標

　　3.此特效是如何實現的呢?看下如下的程式碼

　　4.把此程式碼拷貝到 dreamwerver 的body標籤中間，並預覽，在瀏覽器中的效果如下

　　5.把滑鼠點選進入輸入框，文字消失

　　6.現在解釋下這段程式碼的意思

　　首先，是一個文字框html標籤

　　value="請輸入手機號碼" -- 代表文字框中顯示的內容是“請輸入手機號碼”

　　7.onblur="if***this.value ==''*** {this.value = '請輸入手機號碼'}"

　　-- onblur:官方標準解釋是：事件會在物件失去焦點時發生 。

　　也就是說當你的滑鼠焦點離開文字框的時候執行後邊的程式碼。

　　後邊的程式碼是個if條件語句，翻譯過來的意思就是，當這個文字框的值等於空的時候執行大括號裡的程式碼。

　　大括號裡的程式碼翻譯過來是 給文字框賦值“請輸入手機號碼”。

　　整體程式碼實現的效果就是，當你滑鼠離開的時候，文字框重新填充內容“請輸入手機號碼”

　　8.onfocus="if***this.value == '請輸入手機號碼'***{ this.value = '';this.style.color='#737e73';}"

　　--onfocus：官方標準解釋：事件在物件獲得焦點時發生。

　　也就是說，當你的滑鼠點選進入文字框時，執行後邊的程式碼。

　　後邊的程式碼也是個if語句，翻譯過來的意思就是，當文字框的值是“請輸入手機號碼”的時候，執行後邊大括號裡的程式碼。

　　大括號裡的程式碼翻譯過來就是 給文字框賦值為空，也就是清空文字框的內容，並且把文字框裡的顏色賦值為#737e73。

　　整體程式碼實現的效果就是，當你滑鼠點選進入文字框的時候，文字框的內容“請輸入手機號碼”消失，並且游標的顏色變為#737e73。

　　9.name="phoneNum" maxlength="11"

　　--此程式碼是定義文字框的名字是"phoneNum" 是要在form表單提示的時候用到，這裡可以忽略

　　--maxlength 是定義文字框只能輸入11個字元，因為電話號碼是隻有11位，所以定義他的最大輸入長度

　　10.理解一下上邊的程式碼，把this.style.color='#737e73' 修改為 this.style.color='#ff0000'

　　11.在瀏覽器中的效果是什麼樣子的?沒錯，當你滑鼠點選進入的時候，游標變為了紅色

　　12.當你滑鼠離開的時候，文字也變成了紅色