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

最新推荐文章于 2024-03-05 13:48:08 发布

原创最新推荐文章于 2024-03-05 13:48:08 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

28 篇文章

订阅专栏

HTML

19 篇文章

订阅专栏

本文介绍了一种改进IP地址输入方式的方法，通过将IP地址拆分为四个独立的输入框，并自动填充点号，来提高用户体验。此外，还提供了一个具体的实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

最近感觉公司的一些平台还是存在很多不好使用的地方。比如输入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>