【js+css】经纬度输入框（ip输入框）

最新推荐文章于 2024-05-13 00:19:30 发布

百谷城南

最新推荐文章于 2024-05-13 00:19:30 发布

阅读量1.6k

点赞数 1

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_54134903/article/details/120128207

版权

该博客介绍了一个项目需求，即制作一个类似系统输入IP地址的验证输入框。通过结合三个输入框并定制校验规则，实现了对经纬度的输入控制，包括输入范围限制和焦点切换。提供的代码示例展示了如何使用JavaScript进行键盘事件监听和输入验证，确保输入值在指定范围内。

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

1.项目里的需求要做一个类似系统输入ip的校验框
（ip校验框）只需要多加一个输入框，修改校验规则，我这里只展示了经纬度输入框的代码
2.思路：

3个input合成一个输入框
给输入框做校验
绑定键盘，焦点事件

3.效果展示：
请添加图片描述

4.完整代码

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<title>自动获取光标输入框</title>
		<style>
			.ip_input  {
					width:20%;
					font-size: 14px;
					color:#000000; 
					border:0px; 
					text-align:center;
					 position:relative; 
					 top:1px; 
					 padding: 6px 0px;
					 outline:none;
				}
			 .all_input  {
				width:160px;
				height:30px;
				font:normal 8px 宋体; 
				color:#676a6c; 
				border:1px solid #ccc; 
				text-align:center; 
				border-radius: 3px;
			}
			form{
				display: flex;
				
			}
		</style>
	</head>
	<body>
		
		<script language=javascript>

			function keyUpEvent(obj, num,maxNum) {
				let input1=document.getElementsByClassName("ip1")[num]
				let input2=document.getElementsByClassName("ip2")[num]
				let input3=document.getElementsByClassName("ip3")[num]
				code = event.keyCode
				if (obj == 'ip1') {
					if (input1.value > maxNum) {
						alert("填写范围必须在 0 - "+maxNum+"间");
						input1.value = input1.value.substring(0, input1.value.length - 1);
						return;
					}
					if(maxNum==180){
						
						if (input1.value.length >= 3 && code != 37 && code != 39 && code != 16 && code != 9 && code != 13)
							input2.focus();
					}else{
						if (input1.value.length >= 2 && code != 37 && code != 39 && code != 16 && code != 9 && code != 13)
							input2.focus();
					}
				}
				if (obj == 'ip2') {
					if (input2.value >= 60) {
						alert("填写范围必须在 0 - 60间");
						input2.value = input2.value.substring(0, input2.value.length - 1);
						return;
					}
					if (input2.value.length >= 2 && code != 37 && code != 39 && code != 16 && code != 9 && code != 13)
						input3.focus();
				}
				
			}

			function keyUpEventForIp3(obj,num) {
				let input3=document.getElementsByClassName(obj)[num]
				if (input3.value >= 60) {
					alert("填写范围必须在 0 - 60间");
					input3.value = input3.value.substring(0, input3.value.length - 1);
					return;
				}

			}
		</script>

			<div class=all_input>
				<input name='ip1' class='ip1 ip_input' maxlength=3 autocomplete="off"
					onkeyup='keyUpEvent("ip1",0,180)'>°
				<input name='ip2' class='ip2 ip_input' maxlength=2 autocomplete="off" 
					onkeyup='keyUpEvent("ip2",0)'>′
				<input name='ip3' class='ip3 ip_input' maxlength=2 autocomplete="off" 
					onkeyup='keyUpEventForIp3("ip3",0)'>″
			</div>
			<div class=all_input>
				<input name='ip4' class='ip1 ip_input' maxlength=3 autocomplete="off"
					onkeyup='keyUpEvent("ip1",1,90)'>°
				<input name='ip5' class='ip2 ip_input' maxlength=2 autocomplete="off" 
					onkeyup='keyUpEvent("ip2",1)'>′
				<input name='ip6' class='ip3 ip_input' maxlength=2 autocomplete="off" 
					onkeyup='keyUpEventForIp3("ip3",1)'>″
			</div>
	</body>
</html>