Js中的onblur和onfocus事件應(yīng)用介紹
更新時間:2013年08月27日 16:03:16 作者:
html頁面中,諸如按鈕、文本框等可視元素都具有擁有和失去焦點(diǎn)的事件,本文以文本框獲得和失去焦點(diǎn)為例簡單講解onfocus和onblur的應(yīng)用
html頁面中,諸如按鈕、文本框等可視元素都具有擁有和失去焦點(diǎn)的事件,這些事件在響應(yīng)鼠標(biāo)或鍵盤動作時都可激發(fā)預(yù)設(shè)的操作。本文以文本框獲得和失去焦點(diǎn)為例簡單講解onfocus和onblur的應(yīng)用。
一. onfocus(獲得焦點(diǎn)事件)
當(dāng)一個文本框獲得焦點(diǎn)時,它里面的文本就像“好123”網(wǎng)站上的百度搜索輸入框那樣全部被自動選中,這樣的操作可以利用onfocus來實(shí)現(xiàn)。
以下的文本框,當(dāng)鼠標(biāo)指針移過去時,里面的文字全部被選中:
請輸入網(wǎng)址
這是怎么做的呢?看以下代碼及解釋:
<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">
代碼里,input標(biāo)簽內(nèi)嵌入了onmousemove(鼠標(biāo)指針經(jīng)過)事件的JS語句,其等號后面的this.focus()意為其自身獲得焦點(diǎn);獲得焦點(diǎn)的標(biāo)志是該文本框內(nèi)將出現(xiàn)輸入光標(biāo),但要讓其內(nèi)的文字全部被選中,我們還得用上this.select()語句,它的意思就是選中全部文本框里的文字。
二. onblur(失去焦點(diǎn)事件)
我們經(jīng)常會檢測文本框是否已經(jīng)被正確輸入,檢測工作通常在用戶點(diǎn)擊了提交按鈕之后進(jìn)行,事實(shí)上,利用控件失去焦點(diǎn)的時候,我們就可以實(shí)時進(jìn)行這個檢測工作,這樣的話,onblur事件就派上用場了。
以下例子有四個文本框,如果還沒有任何單擊它們當(dāng)中的任意一個的操作,那么什么事情也不會發(fā)生,但是,當(dāng)你單擊了其中的任何一個使其擁有了焦點(diǎn)(輸入光標(biāo)在里面),如果什么都沒有輸入并且單擊了別的地方令其失去焦點(diǎn),就會彈出一個警告,試試看
姓名
性別
年齡
住址
以下是代碼和解釋:
表單代碼
<form name="blur_test">
<p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
性別 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
年齡 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>
JS代碼
<scriptlanguage="javascript">
function chkvalue(txt) {
if(txt.value=="") alert("文本框里必須填寫內(nèi)容!");
}
</script>
表單代碼里,每一個方框框的代碼都嵌入一個onblur JS語句,它們都調(diào)用后面的JS代碼中的自定義函數(shù)chkvalue(this),意思是,當(dāng)文本框失去焦點(diǎn)時就調(diào)用chkvalue()函數(shù);這chkvalue()函數(shù)檢測文本框是否為空,如果是就彈出警告窗口。該函數(shù)有一個參數(shù)(txt),對應(yīng)于前面文本框調(diào)用該函數(shù)的參數(shù)(this)即自身。
一. onfocus(獲得焦點(diǎn)事件)
當(dāng)一個文本框獲得焦點(diǎn)時,它里面的文本就像“好123”網(wǎng)站上的百度搜索輸入框那樣全部被自動選中,這樣的操作可以利用onfocus來實(shí)現(xiàn)。
以下的文本框,當(dāng)鼠標(biāo)指針移過去時,里面的文字全部被選中:
請輸入網(wǎng)址
這是怎么做的呢?看以下代碼及解釋:
<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">
代碼里,input標(biāo)簽內(nèi)嵌入了onmousemove(鼠標(biāo)指針經(jīng)過)事件的JS語句,其等號后面的this.focus()意為其自身獲得焦點(diǎn);獲得焦點(diǎn)的標(biāo)志是該文本框內(nèi)將出現(xiàn)輸入光標(biāo),但要讓其內(nèi)的文字全部被選中,我們還得用上this.select()語句,它的意思就是選中全部文本框里的文字。
二. onblur(失去焦點(diǎn)事件)
我們經(jīng)常會檢測文本框是否已經(jīng)被正確輸入,檢測工作通常在用戶點(diǎn)擊了提交按鈕之后進(jìn)行,事實(shí)上,利用控件失去焦點(diǎn)的時候,我們就可以實(shí)時進(jìn)行這個檢測工作,這樣的話,onblur事件就派上用場了。
以下例子有四個文本框,如果還沒有任何單擊它們當(dāng)中的任意一個的操作,那么什么事情也不會發(fā)生,但是,當(dāng)你單擊了其中的任何一個使其擁有了焦點(diǎn)(輸入光標(biāo)在里面),如果什么都沒有輸入并且單擊了別的地方令其失去焦點(diǎn),就會彈出一個警告,試試看
姓名
性別
年齡
住址
以下是代碼和解釋:
表單代碼
復(fù)制代碼 代碼如下:
<form name="blur_test">
<p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
性別 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
年齡 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>
JS代碼
復(fù)制代碼 代碼如下:
<scriptlanguage="javascript">
function chkvalue(txt) {
if(txt.value=="") alert("文本框里必須填寫內(nèi)容!");
}
</script>
表單代碼里,每一個方框框的代碼都嵌入一個onblur JS語句,它們都調(diào)用后面的JS代碼中的自定義函數(shù)chkvalue(this),意思是,當(dāng)文本框失去焦點(diǎn)時就調(diào)用chkvalue()函數(shù);這chkvalue()函數(shù)檢測文本框是否為空,如果是就彈出警告窗口。該函數(shù)有一個參數(shù)(txt),對應(yīng)于前面文本框調(diào)用該函數(shù)的參數(shù)(this)即自身。
您可能感興趣的文章:
- AngularJS ng-blur 指令詳解及簡單實(shí)例
- 老生常談onBlur事件與onfocus事件(js)
- jsp+ajax實(shí)現(xiàn)的局部刷新較驗(yàn)驗(yàn)證碼(onblur事件觸發(fā)較驗(yàn))
- javascript委托(Delegate)blur和focus用法實(shí)例分析
- AngularJS Controller作用域
- JS 實(shí)現(xiàn)計(jì)算器詳解及實(shí)例代碼(一)
- JSP頁面跳轉(zhuǎn)方法小結(jié)
- 詳解js中==與===的區(qū)別
- js時間控件只顯示年月
- java后端把數(shù)據(jù)轉(zhuǎn)換為樹,map遞歸生成json樹,返回給前端(后臺轉(zhuǎn)換)
- 完美解決node.js中使用https請求報CERT_UNTRUSTED的問題
- JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法示例
- Javascript blur與click沖突解決辦法
- jsp頁面顯示數(shù)據(jù)庫的數(shù)據(jù)信息表
相關(guān)文章
怎樣在JavaScript里寫一個swing把數(shù)據(jù)插入數(shù)據(jù)庫
在JavaScript里寫一個swing來實(shí)現(xiàn)確定取消,來決定是否執(zhí)行這個功能 控制把數(shù)據(jù)插入數(shù)據(jù)庫,接下來介紹實(shí)現(xiàn)方法2012-12-12
JavaScript中的call方法和apply方法使用對比
這篇文章主要介紹了JavaScript中的call方法和apply方法使用對比,需要的朋友可以參考下2015-08-08
javascript學(xué)習(xí)筆記(十七) 檢測瀏覽器插件代碼
javascript學(xué)習(xí)筆記之檢測瀏覽器插件代碼,需要的朋友可以參考下2012-06-06
深入理解JavaScript系列(45):代碼復(fù)用模式(避免篇)詳解
這篇文章主要介紹了深入理解JavaScript系列(45):代碼復(fù)用模式(避免篇)詳解,本文講解了默認(rèn)模式、借用構(gòu)造函數(shù)、借用構(gòu)造函數(shù)并設(shè)置原型、共享原型、臨時構(gòu)造函數(shù)、klass等內(nèi)容,需要的朋友可以參考下2015-03-03
javascript學(xué)習(xí)筆記(十八) 獲得頁面中的元素代碼
javascript學(xué)習(xí)筆記之獲得頁面中的元素代碼,需要的朋友可以參考下2012-06-06

