Onblur的点击事件
Onblur的事件
onblur?的事件會在對象失去焦點(diǎn)時(shí)發(fā)生。
語法
οnblur="SomeJavaScriptCode"
具體實(shí)例：
細(xì)心的朋友在上網(wǎng)注冊時(shí)候，當(dāng)我們注冊的時(shí)候鼠標(biāo)移開注冊的文本框或者密碼文本框的時(shí)候會有紅色的字體提示
“用戶名或密碼不正確”等等信息，那么這個(gè)就是Onblur事件，失去焦點(diǎn)發(fā)生的事件：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 驗(yàn)證用戶和密碼，當(dāng)鼠標(biāo)離開點(diǎn)擊其它地方的時(shí)候文本框里出現(xiàn)提示 */
.ok{
visibility: hidden;? ?//讓文本框的元素隱藏，這里用到的visibility--不脫離文檔流的隱藏，還有一種是
????????????????????????????????????????????? ????????????????????????????????????????????????????????? display: none;?這種會脫離文檔流;
.error{
visibility: visible;//輸入錯(cuò)誤讓其顯示，Visible：
color: red;
}
</style>
<script type="text/javascript">
? ? function checkun(){
????? ? var username=document.getElementById("username");//獲取用戶文本框的內(nèi)容
????????//創(chuàng)建正則
????? ? var reg=/\^\w{6,10}$/;
????? ? var span=document.getElementById("unspan");//獲取span?初始被隱藏，當(dāng)錯(cuò)誤的時(shí)候會顯示
????? ? if( reg.test(username)){//用正則判斷
????????????? ? span.className="ok";//正確
????????????????? ? return true;
? ??????}eilse{
????????????? ? span.className="error";//錯(cuò)誤
????????????? ? return false;
};
}
?function checkpw(){
????? ? var password=document.getElementById("password");
????? ? var reg=/\^\w{6,10}$/;
????? ? var span=document.getElementById("pwspan");
????? ? if( reg.test(password)){//用正則判斷
????????????? ? span.className="ok";//正確
????????????????? ? return true;
? ??????}eilse{
????????????? ? span.className="error";//錯(cuò)誤
????????????? ? return false;
};
}
</script>
<body>
<form action="http://......."
οnsubmit=" return checkun()+checkpw()==2">
?????????<input type="text" id="username"?οnblur="checkun()">????? ? ?<span id="unspan" class="ok">用戶名格式不正確</span><br>
?????????<input type="password" id="password" οnblur="checkpw()">
????????<span id="pwspan" class="ok">密碼格式不正確</span><br>
????????<input type="submit" value="登錄" >
</form>
</body>
</html>
實(shí)例圖：
總結(jié)
以上是生活随笔為你收集整理的Onblur的点击事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery教程（二）——jQuery选
- 下一篇： 如何测试数字硅麦软件,硅麦参考电路及la