老生常談onBlur事件與onfocus事件(js)

更新時(shí)間：2016年07月09日 10:08:56 投稿：jingxian

下面小編就為大家?guī)?lái)一篇老生常談onBlur事件與onfocus事件(js)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

onFocus事件就是當(dāng)光標(biāo)落在文本框中時(shí)發(fā)生的事件。

onBlur事件是光標(biāo)失去焦點(diǎn)時(shí)發(fā)生的事件。

可以編如下例子

1.html

<HTML> 
<HEAD> 
<TITLE>使用onBlur事件處理程序</TITLE> 
</HEAD> 
<BODY BGCOLOR="lavender"> 
<FORM name="F1"> 
<INPUT TYPE=text NAME=text1 value="1111ONBLUR_green" ONBLUR="(document.bgColor='green')"> 
<INPUT TYPE=text NAME=text2 value="2222ONBLUR_black" ONBLUR="(document.bgColor='black')"> 
<INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" ONBLUR="(document.bgColor='yellow')"> 
<br>
<p>
<INPUT TYPE=text NAME=text3 value="4444onfocus_blue" onfocus="(document.bgColor='blue')"> 
<INPUT TYPE=text NAME=text4 value="5555onfocus_red" onfocus="(document.bgColor='red')">
<INPUT TYPE=text NAME=text4 value="6666onfocus_orange" onfocus="(document.bgColor='orange')">
</FORM> 
</BODY> 
</HTML>

還有以下例子

2.html

<!-- 文件說(shuō)明：OnFocus事件 -->
 <!-- ------------------------------ -->
 <html>
 <head>
 <title>OnFocus事件</title>
 </head>
 <body>
 <Form>

 <input type="text" name="test1" value="test1" onclick=alert("可以關(guān)掉!")> 
 <input type="text" name="test1" value="test1" onblur=alert("可以關(guān)掉aaaaaaa!")>

 <input type="text" name="test1" value="test1" onclick=alert("可以關(guān)掉bbbbbbbbb!")> 
 <input type="text" name="test2" value="一按我就無(wú)法關(guān)掉了，haha" onFocus=alert("我成為了輸入焦點(diǎn)!")>
 </Form>
 </body>
 </html>

以上這篇老生常談onBlur事件與onfocus事件(js)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解JavaScript中的數(shù)據(jù)類(lèi)型，以及檢測(cè)數(shù)據(jù)類(lèi)型的方法
這篇文章主要介紹了JavaScript中的數(shù)據(jù)類(lèi)型，以及檢測(cè)數(shù)據(jù)類(lèi)型的方法，幫助大家鞏固基礎(chǔ)知識(shí)，感興趣的朋友可以了解下
2020-09-09
JavaScript基礎(chǔ)之立即執(zhí)行函數(shù)
這篇文章主要介紹了如何理解JavaScript中的立即執(zhí)行函數(shù)，幫助大家更好的學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2021-11-11
淺談String.valueOf()方法的使用
下面小編就為大家?guī)?lái)一篇淺談String.valueOf()方法的使用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
淺談Javascript中深復(fù)制
本文主要給大家介紹了javascript中深復(fù)制的實(shí)現(xiàn)方式，這里推薦給有需要的小伙伴參考下。
2014-12-12
JavaScript入門(mén)教程(7) History歷史對(duì)象
JavaScript中的History歷史對(duì)象包含了用戶已瀏覽的 URL 的信息，是指歷史對(duì)象指瀏覽器的瀏覽歷史。
2009-01-01
javascript流程控制語(yǔ)句集合
流程控制語(yǔ)句在JS中是至關(guān)重要的。JS中的流程控制語(yǔ)句包括if條件判斷語(yǔ)句、for循環(huán)語(yǔ)句、while循環(huán)語(yǔ)句、do……while循環(huán)語(yǔ)句、break語(yǔ)句、continue語(yǔ)句和switch語(yǔ)句等7種語(yǔ)句,需要的朋友可以參考下
2017-09-09
javascript學(xué)習(xí)筆記(二十) 獲得和設(shè)置元素的特性（屬性）
javascript學(xué)習(xí)筆記之獲得和設(shè)置元素的特性（屬性）介紹，學(xué)習(xí)js的朋友可以參考下
2012-06-06
再JavaScript的jQuery庫(kù)中編寫(xiě)動(dòng)畫(huà)效果的指南
這篇文章主要介紹了再JavaScript的jQuery庫(kù)中編寫(xiě)動(dòng)畫(huà)效果的指南,包括一些內(nèi)建的效果方法的使用示例,需要的朋友可以參考下
2015-08-08
JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)教程
這篇文章主要介紹了JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)入門(mén)教程,包括對(duì)節(jié)點(diǎn)的創(chuàng)建修改刪除等操作,還特別提到了其中appendChild()與insertBefore()插入節(jié)點(diǎn)時(shí)需注意的問(wèn)題,需要的朋友可以參考下
2016-03-03
你必須知道的JavaScript 中字符串連接的性能的一些問(wèn)題
每種程序語(yǔ)言中都會(huì)涉及到字符竄連接，而這個(gè)小小的字符竄連接問(wèn)題很可能會(huì)影響到系統(tǒng)的整體性能，本文主要探討JavaScript中字符串連接的性能問(wèn)題
2013-05-05