鼠標點擊輸入框文字消失怎么辦
鼠標點擊輸入框文字消失怎么辦
當我們對鼠標進行特效裝飾的時候，卻發現鼠標點擊輸入框文字就消失了怎么辦?下面是學習啦小編為大家介紹鼠標點擊輸入框文字消失的解決方法,歡迎大家閱讀。
鼠標點擊輸入框文字消失的解決方法
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.當你鼠標離開的時候，文字也變成了紅色