关于javascript的onkeyup事件的一点疑问

freemanxm84

浏览: 21334 次
性别:

最近访客更多访客>>

ebuilder

tangqingqing10

fzhdev

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (8)

社区版块

存档分类

JavaScript XHTML HTML

今天在做一个类似IP输入框的时候遇到一个不大不小的麻烦！在我使用onkeyup事件的时候程序运行了我所预料之外的结果，把代码贴在这里，看看是问题出在那里。有解决方案的把代码贴上大家共享，谢谢了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
	function keyJump1(obj){
		if(obj.length==4) {
			document.all.personNumber2.focus();
		}
	}
	function keyJump2(obj){
		if(obj.length==6) document.all.personNumber3.focus();
	}
	function keyJump3(obj){
		if(obj.length==8) document.all.personNumber4.focus();
	}
</script>
<body>
<table  border="0">
	<tr>
		<td><input name="personNumber1" type="text" class="textbox" style=" width:030; height:20 " onfocus="this.select()" onkeyup='keyJump1(this.value)' maxlength="4"></td>
		<td width="005">-</td>
		<td ><input name="personNumber2" type="text" class="textbox" style=" width:040; height:20" onfocus="this.select()" onkeyup='keyJump2(this.value)' maxlength="6"></td>
		<td width="005">-</td>
		<td ><input name="personNumber3" type="text" class="textbox" style=" width:055; height:20" onfocus="this.select()" onkeyup='keyJump3(this.value)' maxlength="8"></td>
		<td width="005">-</td>
		<td ><input name="personNumber4" type="text" class="textbox" style=" width:010; height:20" onfocus="this.select()" onkeyup='' maxlength="1"></td>
	</tr>
</table>	
</body>
</html>

这张页面按我最初的设计是在判断前一个输入框已输入符合长度的值时自动跳到下一个输入框，并将输入框内的内容选中。在输入框都为空的情况下能正常运行，但当输入框都填满后，回到第一个输入框或第二个输入框，再对值进行修改时就出现问题了，如：在第一输入框输入四个字符后，焦点并不是跳到第二个输入框，却跳到了第三个输入框，似乎是在第二个输入框自动激发了一次onkeyup事件，但这应该不是代码中的错误。郁闷，谢谢各位指点迷津！

分享到：

2007-02-08 01:37
浏览 2844
评论(1)
论坛回复 / 浏览 (1 / 7162)
分类:Web前端
查看更多

1 楼 freemanxm84 2007-02-08

经过我仔细测试发现，其实一次键盘弹起动作激发了两次onkeyup事件，我在没有找到很好的解决办法之前是采用硬编码的方法消化掉一次onkeyup事件，虽然是很不好的方法，但是我真想不出别的什么方法来解决了。现将修改后的代码贴出来，希望和我一样追求完美代码的朋友和我一起来把这段小小的代码变得更优雅一些：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
	function keyJump1(obj){
		if(obj.length==4) {
			document.all.temp1.focus();
			
		}
	}
	function keyJump2(obj){
	
		if(obj.length==6) 
		{
			document.all.temp2.focus();
		}
	}
	function keyJump3(obj){
		if(obj.length==8) document.all.temp3.focus();
	}
	function keyJumpTemp(obj){
		obj.focus();
	}
</script>
<body>
<table  border="0">
	<tr>
		<td><input name="personNumber1" type="text" class="textbox" style=" width:030; height:20 " onfocus="this.select()" onkeyup='keyJump1(this.value)' maxlength="4"></td>
		<td id="temp1"  width="005" onkeyup="keyJumpTemp(document.all.personNumber2)">-</td>
		<td ><input name="personNumber2" type="text" class="textbox" style=" width:040; height:20" onfocus="this.select()" onkeyup='keyJump2(this.value)' maxlength="6"></td>
		<td id="temp2" width="005" onkeyup="keyJumpTemp(document.all.personNumber3)">-</td>
		<td ><input name="personNumber3" type="text" class="textbox" style=" width:055; height:20" onfocus="this.select()" onkeyup='keyJump3(this.value)' maxlength="8"></td>
		<td id="temp3" width="005" onkeyup="keyJumpTemp(document.all.personNumber4)">-</td>
		<td ><input name="personNumber4" type="text" class="textbox" style=" width:010; height:20" onfocus="this.select()" onkeyup='' maxlength="1"></td>
	</tr>
</table>	
</body>
</html>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论