您的位置：首页 > Web前端 > JavaScript

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

2012-01-31 11:07 453 查看

js 失去焦点并得到焦点

[xhtml]
view plaincopy print ?

<mce:styletype="text/css"></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 plaincopyprint?

<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> 

<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" onfocus="if (value =='sfrost.org'){value =''}" onblur="if
(value ==''){value='sfrost.org'}" />
这段代码中，使用了JS的focus和blur方法，其实对应的就是VB的setfocus和lostfocus方法。当文本框获得焦点时触发onfocus方法，而当焦点离开时则触发onblur方法。

通过这样的方法，可以实现：输入内容出错的时候，在提交表单的时候提示出错，并将出错位置的数据清空，然后使其获得焦点。

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

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

<script>

var count = 0;

function dochange(o) {

// ...

o.focus();

// alert('afer o.focus : ' + count);

count++;

}

</script>

<input type="text" name="txt" value="123" onblur="dochange(this)"/>

<input type="text" name="txt2" value="12322" onblur="dochange(this)"/>

1.1失去焦点，触发dochange事件，同时2获得焦点；

2.1重新获得焦点，使得2失去焦点，触发2的dochange事件,1事件完成；

3.2重新获得焦点，使得1再次失去焦点，2事件完成。

4.循环。

再添加了一个alert后不会出现死循环是因为，alert语句使得焦点移到了window。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： button javascript xhtml url input class

相关文章推荐

新的分享

章节导航

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

js 失去焦点 并得到焦点

js 失去焦点并得到焦点