鼠標(biāo)點(diǎn)擊輸入框文字消失怎么辦
鼠標(biāo)點(diǎn)擊輸入框文字消失怎么辦
當(dāng)我們對(duì)鼠標(biāo)進(jìn)行特效裝飾的時(shí)候，卻發(fā)現(xiàn)鼠標(biāo)點(diǎn)擊輸入框文字就消失了怎么辦?下面是學(xué)習(xí)啦小編為大家介紹鼠標(biāo)點(diǎn)擊輸入框文字消失的解決方法,歡迎大家閱讀。
鼠標(biāo)點(diǎn)擊輸入框文字消失的解決方法
11.我們在充值繳費(fèi)的時(shí)候，或者輸入用戶名密碼的時(shí)候，經(jīng)常會(huì)見到如下的提示框
22.當(dāng)你的鼠標(biāo)點(diǎn)擊在“手機(jī)號(hào)碼輸入框”中的時(shí)候，輸入框中的“請輸入手機(jī)號(hào)碼”文字消失，取代的是鼠標(biāo)中的光標(biāo)
3.此特效是如何實(shí)現(xiàn)的呢?看下如下的代碼
4.把此代碼拷貝到 dreamwerver 的body標(biāo)簽中間，并預(yù)覽，在瀏覽器中的效果如下
5.把鼠標(biāo)點(diǎn)擊進(jìn)入輸入框，文字消失
6.現(xiàn)在解釋下這段代碼的意思
首先，是一個(gè)文本框html標(biāo)簽
value="請輸入手機(jī)號(hào)碼" -- 代表文本框中顯示的內(nèi)容是“請輸入手機(jī)號(hào)碼”
7.onblur="if(this.value =='') {this.value = '請輸入手機(jī)號(hào)碼'}"
-- onblur:官方標(biāo)準(zhǔn)解釋是：事件會(huì)在對(duì)象失去焦點(diǎn)時(shí)發(fā)生 。
也就是說當(dāng)你的鼠標(biāo)焦點(diǎn)離開文本框的時(shí)候執(zhí)行后邊的代碼。
后邊的代碼是個(gè)if條件語句，翻譯過來的意思就是，當(dāng)這個(gè)文本框的值等于空的時(shí)候執(zhí)行大括號(hào)里的代碼。
大括號(hào)里的代碼翻譯過來是 給文本框賦值“請輸入手機(jī)號(hào)碼”。
整體代碼實(shí)現(xiàn)的效果就是，當(dāng)你鼠標(biāo)離開的時(shí)候，文本框重新填充內(nèi)容“請輸入手機(jī)號(hào)碼”
8.onfocus="if(this.value == '請輸入手機(jī)號(hào)碼'){ this.value = '';this.style.color='#737e73';}"
--onfocus：官方標(biāo)準(zhǔn)解釋：事件在對(duì)象獲得焦點(diǎn)時(shí)發(fā)生。
也就是說，當(dāng)你的鼠標(biāo)點(diǎn)擊進(jìn)入文本框時(shí)，執(zhí)行后邊的代碼。
后邊的代碼也是個(gè)if語句，翻譯過來的意思就是，當(dāng)文本框的值是“請輸入手機(jī)號(hào)碼”的時(shí)候，執(zhí)行后邊大括號(hào)里的代碼。
大括號(hào)里的代碼翻譯過來就是 給文本框賦值為空，也就是清空文本框的內(nèi)容，并且把文本框里的顏色賦值為#737e73。
整體代碼實(shí)現(xiàn)的效果就是，當(dāng)你鼠標(biāo)點(diǎn)擊進(jìn)入文本框的時(shí)候，文本框的內(nèi)容“請輸入手機(jī)號(hào)碼”消失，并且光標(biāo)的顏色變?yōu)?737e73。
9.name="phoneNum" maxlength="11"
--此代碼是定義文本框的名字是"phoneNum" 是要在form表單提示的時(shí)候用到，這里可以忽略
--maxlength 是定義文本框只能輸入11個(gè)字符，因?yàn)殡娫捥?hào)碼是只有11位，所以定義他的最大輸入長度
10.理解一下上邊的代碼，把this.style.color='#737e73' 修改為 this.style.color='#ff0000'
11.在瀏覽器中的效果是什么樣子的?沒錯(cuò)，當(dāng)你鼠標(biāo)點(diǎn)擊進(jìn)入的時(shí)候，光標(biāo)變?yōu)榱思t色
12.當(dāng)你鼠標(biāo)離開的時(shí)候，文字也變成了紅色
1.jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁文字后在文本框顯示