快捷導(dǎo)航

js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件

更新時間：2014年03月25日 17:38:45 作者：

注冊網(wǎng)站的輸入框就有默認(rèn)提示值，當(dāng)獲取鼠標(biāo)焦點的時候，默認(rèn)值被刪除，當(dāng)用戶沒輸入東西焦點離開的時候，又恢復(fù)默認(rèn)提示值

我們經(jīng)常遇到一些輸入框，比如注冊網(wǎng)站的輸入框就有默認(rèn)提示值，當(dāng)獲取鼠標(biāo)焦點的時候，默認(rèn)值被刪除，當(dāng)用戶沒輸入東西焦點離開的時候，又恢復(fù)默認(rèn)提示值。這方法用js代碼實現(xiàn)如下：

html代碼：

復(fù)制代碼代碼如下:

 
<input type="text" id="email" name="email" class="txt_input" value="請輸入經(jīng)常使用的郵箱" onfocus="fn_focus(this);" onblur="fn_blur(this);"/> 

js代碼：

復(fù)制代碼代碼如下:

 
function fn_focus(ele){ 
if(ele.value == ele.defaultValue){ 
ele.value = ''; 
} 
} 
function fn_blur(ele){ 
var reg = /^[\s]*$/; 
if(reg.test(ele.value) || ele.value == ele.defaultValue){ 
ele.value = ele.defaultValue; 
} 
} 

您可能感興趣的文章:

相關(guān)文章

微信小程序scroll-view實現(xiàn)橫向滾動和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實現(xiàn)橫向滾動和上拉加載示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
Javascript實現(xiàn)前端簡單的路由實例
本文將使用javascript實現(xiàn)一個極其簡單的路由實例。WEB開發(fā)中路由概念并不陌生，我們接觸到的有前端路由和后端路由。后端路由在很多框架中是一個重要的模塊,同樣前端路由在單頁面應(yīng)用也很常見，它使得前端頁面體驗更流暢。
2016-09-09
uniapp中vuex的應(yīng)用使用步驟
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于uniapp中vuex的應(yīng)用使用,需要的朋友可以參考下
2022-08-08
npm qs模塊使用詳解
這篇文章主要介紹了npm qs模塊使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
一文帶你玩轉(zhuǎn)JavaScript的箭頭函數(shù)
在ES6中新增了函數(shù)的簡寫方式----箭頭函數(shù)，箭頭函數(shù)的出現(xiàn)不僅簡化了大量代碼，也讓代碼看起來更加優(yōu)雅，同時也解決了this指向問題，下面我們就來詳細(xì)講解如何玩轉(zhuǎn)箭頭函數(shù)
2022-09-09
Bootstrap模態(tài)框禁用空白處點擊關(guān)閉
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框禁用空白處點擊關(guān)閉的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
javascript 原型與原型鏈的理解及實例分析
這篇文章主要介紹了javascript 原型與原型鏈的理解,結(jié)合實例形式分析了javascript 原型與原型鏈的原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-11-11
javascript與css3動畫結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動畫來實現(xiàn)一些占用資源更少，更優(yōu)化的動畫效果，思路十分巧妙，這里推薦給小伙伴們參考下。
2015-03-03
GoJs連線繪圖模板Link使用示例詳解
這篇文章主要為大家介紹了GoJs連線繪圖模板Link使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
在Vue.js中使用Mock數(shù)據(jù)的詳細(xì)教程與技巧
這篇文章主要介紹了在Vue.js項目中設(shè)置和使用Mock數(shù)據(jù)的方法,Mock數(shù)據(jù)在前端開發(fā)、單元測試和調(diào)試中非常有用,可以通過使用axios進(jìn)行數(shù)據(jù)請求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-12-12