js中onblur与onfocus函数中的几点区别与联系

最新推荐文章于 2024-02-16 17:42:45 发布

lhy2199

最新推荐文章于 2024-02-16 17:42:45 发布

阅读量7.5k

点赞数

文章标签： button javascript xhtml url input class

[xhtml] view plain copy print ?

<mce:styletype="text/css"><!--
button1,.button2,.button3 {
height: 28px;
width: 60px;
}
.button2{background-image: url(InsUserA.gif);}
.button3 {
background-image: url(RplyPwd.gif);}
--></mce:style><styletype="text/css"mce_bogus="1">button1,.button2,.button3 {
height: 28px;
width: 60px;
}
.button2{background-image: url(InsUserA.gif);}
.button3 {
background-image: url(RplyPwd.gif);}</style>
<input type="button"class="button2"name="OUT_PWD"value=""onmouseover="this.className='button3';"/>
<inputtype="button"class="button3"name="OUT_PWD"value=""onmouseover="this.className='button2';"/>
<input type="text"value=""onblur="javascript:alert('失去焦点');this.focus()"/>

整体post 传递值

[xhtml] view plain copy print ?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<mce:script language="JavaScript"><!--
function check() {
if(myForm.username.value.length < 6 || myForm.username.value.length >15) {
alert("用户名必需有6~15的字符");
myForm.username.value="";
myForm.username.focus();
return false;
}
}
// --></mce:script>
</head>
<body>
<form action="register.jsp" method="post" name="myForm" onSubmit="return check()">
<table width="80%" align="center" border="1" cellspacing="0" bordercolor="#999999">
<tr align="center">
<td colspan="2"> <br>用户注册 </td>
</tr>
<tr>
<td width="15%">用户名: </td>
<td> <input type="text" name="username" maxlength="15" size="30" id="name"/>
<input type="Submit" name="Submit"/></td>
<tr/>
</form>
</body>
</html>

鼠标事件与 onblur事件的联系

[c-sharp] view plain copy print ?

经常看见一些网站的搜索框里会有一个预先设置好的提示，然后当你将鼠标点进去以后，里面的内容就清空了。学VB的时候这功能很容易就实现了，也就是简单的setfocus和lostfocus哈，不过JS里面可不是这样的。
JavaScript代码
1. <input name="word" class="seachInput" value="sfrost.org" οnfοcus="if (value =='sfrost.org'){value =''}" οnblur="if (value ==''){value='sfrost.org'}" />
这段代码中，使用了JS的focus和blur方法，其实对应的就是VB的setfocus和lostfocus方法。当文本框获得焦点时触发onfocus方法，而当焦点离开时则触发onblur方法。
通过这样的方法，可以实现：输入内容出错的时候，在提交表单的时候提示出错，并将出错位置的数据清空，然后使其获得焦点。

之前写的js事件onblur和focus里面认为是对象失去焦点的同时获得焦点，而由于onblur会在事件完成后再来一次所以导致的死循环是我猜测错了。

虽然确实是因为onblur和focus死循环引起的，不过是1对象的onblur后重新获得焦点时导致2对象的onblur，如此循环所致。测试代码如下。

1.1失去焦点，触发dochange事件，同时2获得焦点；
2.1重新获得焦点，使得2失去焦点，触发2的dochange事件,1事件完成；
3.2重新获得焦点，使得1再次失去焦点，2事件完成。
4.循环。
再添加了一个alert后不会出现死循环是因为，alert语句使得焦点移到了window。

关注