老生常談onBlur事件與onfocus事件(js)
更新時(shí)間：2016年07月09日 10:08:56 投稿：jingxian
下面小編就為大家?guī)硪黄仙Ｕ刼nBlur事件與onfocus事件(js)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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
<!-- 文件說明：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="一按我就無法關(guān)掉了，haha" onFocus=alert("我成為了輸入焦點(diǎn)!")>
</Form>
</body>
</html>
以上這篇老生常談onBlur事件與onfocus事件(js)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- AngularJS ng-blur 指令詳解及簡單實(shí)例
- jsp+ajax實(shí)現(xiàn)的局部刷新較驗(yàn)驗(yàn)證碼(onblur事件觸發(fā)較驗(yàn))
- javascript委托(Delegate)blur和focus用法實(shí)例分析
- Js中的onblur和onfocus事件應(yīng)用介紹
- AngularJS Controller作用域
- JS 實(shí)現(xiàn)計(jì)算器詳解及實(shí)例代碼（一）
- JSP頁面跳轉(zhuǎn)方法小結(jié)
- 詳解js中==與===的區(qū)別
- js時(shí)間控件只顯示年月
- java后端把數(shù)據(jù)轉(zhuǎn)換為樹,map遞歸生成json樹,返回給前端(后臺(tái)轉(zhuǎn)換)
- 完美解決node.js中使用https請(qǐng)求報(bào)CERT_UNTRUSTED的問題
- JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法示例
- Javascript blur與click沖突解決辦法
- jsp頁面顯示數(shù)據(jù)庫的數(shù)據(jù)信息表
相關(guān)文章
詳解JavaScript中的數(shù)據(jù)類型，以及檢測(cè)數(shù)據(jù)類型的方法
這篇文章主要介紹了JavaScript中的數(shù)據(jù)類型，以及檢測(cè)數(shù)據(jù)類型的方法，幫助大家鞏固基礎(chǔ)知識(shí)，感興趣的朋友可以了解下2020-09-09
JavaScript基礎(chǔ)之立即執(zhí)行函數(shù)
這篇文章主要介紹了如何理解JavaScript中的立即執(zhí)行函數(shù)，幫助大家更好的學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2021-11-11
下面小編就為大家?guī)硪黄獪\談String.valueOf()方法的使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
本文主要給大家介紹了javascript中深復(fù)制的實(shí)現(xiàn)方式，這里推薦給有需要的小伙伴參考下。2014-12-12
JavaScript入門教程(7) History歷史對(duì)象
JavaScript中的History歷史對(duì)象包含了用戶已瀏覽的 URL 的信息，是指歷史對(duì)象指瀏覽器的瀏覽歷史。2009-01-01
流程控制語句在JS中是至關(guān)重要的。JS中的流程控制語句包括if條件判斷語句、for循環(huán)語句、while循環(huán)語句、do……while循環(huán)語句、break語句、continue語句和switch語句等7種語句,需要的朋友可以參考下2017-09-09
javascript學(xué)習(xí)筆記(二十) 獲得和設(shè)置元素的特性（屬性）
javascript學(xué)習(xí)筆記之獲得和設(shè)置元素的特性（屬性）介紹，學(xué)習(xí)js的朋友可以參考下2012-06-06
再JavaScript的jQuery庫中編寫動(dòng)畫效果的指南
這篇文章主要介紹了再JavaScript的jQuery庫中編寫動(dòng)畫效果的指南,包括一些內(nèi)建的效果方法的使用示例,需要的朋友可以參考下2015-08-08
JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)教程
這篇文章主要介紹了JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)入門教程,包括對(duì)節(jié)點(diǎn)的創(chuàng)建修改刪除等操作,還特別提到了其中appendChild()與insertBefore()插入節(jié)點(diǎn)時(shí)需注意的問題,需要的朋友可以參考下2016-03-03
你必須知道的JavaScript 中字符串連接的性能的一些問題
每種程序語言中都會(huì)涉及到字符竄連接，而這個(gè)小小的字符竄連接問題很可能會(huì)影響到系統(tǒng)的整體性能，本文主要探討JavaScript中字符串連接的性能問題2013-05-05