码迷,mamicode.com
首页 > Web开发 > 详细

HTML中输入框自动切换到下一个

时间:2014-11-23 17:39:38      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   使用   sp   java   

最近看了部关于乔布斯的电影,感觉里面的电影情节还是很棒的。

就是软件开发者一定要考虑到用户的感受,一定要能非常简单的使用起来。

最近感觉公司的一些平台还是存在很多不好使用的地方。比如输入IP的输入框。

现在的设计是需要用户输入点号。

我想能不能设计成类似于windows的那种输入的方式。

设计为四个输入框,其中点号已经添加进去了。

其中那一段脚本必须要放入body内,否则无法识别到这个函数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>IP添加方式改变</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	</head>

	<body>
		<form id="myForm">

			<table align="center" border="1px" cellpadding="0" cellspacing="0">
				<tr>
					<td align="center">
						IP添加方式
					</td>
				</tr>
				<tr>
					<td>
						<input tabindex="1" type="text" size="3" maxlength="3"  
							onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)" />
						.
						<input tabindex="2" type="text" size="3" maxlength="3"
							onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)" />
						.
						<input tabindex="3" type="text" size="3" maxlength="3"
							onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)"/>
						.
						<input tabindex="4" type="text" size="3" maxlength="3"
							onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
		<script type="text/javascript">
        function checkLen(x, y) {
	   if (y.length == x.maxLength) {
		var next = x.tabIndex;
		//是否到了最后一个文本框
		if (next < document.getElementById("myForm").length) {
			document.getElementById("myForm").elements[next].focus();
		}
	}
	}
	function checkNum(e)
{
var keynum
var keychar
var numcheck

if(window.event) // IE
	{
	keynum = e.keyCode
	}
else if(e.which) // Netscape/Firefox/Opera
	{
	keynum = e.which
	}
keychar = String.fromCharCode(keynum)
numcheck = /\d/;
return numcheck.test(keychar)
}

</script>
</html>
bubuko.com,布布扣

HTML中输入框自动切换到下一个

标签:des   style   blog   http   io   ar   使用   sp   java   

原文地址:http://blog.csdn.net/baidu_18607183/article/details/41411919

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!