本文介绍了一个简单的网页应用，能够从剪贴板中复制IP地址并自动填充到多个输入框中进行验证。该应用使用HTML、CSS和JavaScript实现，通过jQuery简化DOM操作。主要功能包括读取剪贴板数据、按空格分割IP地址、将每个IP地址填充到对应的输入框，并检查IP地址的有效性。
本demo是从其他地方复制一段东西过来，依次拷贝到相应的输入框内：
页面部分代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Hello</title>
<link rel="stylesheet" href="./css/ip-input.css">
<script src="./js/jquery-1.4.3.js">
</script>
<script type="text/javascript" src = "./js/IP.js">
$(document).ready(function(){
$("#ipInput").ipInput();
});
</script>
</head>
<body>
<br/>
<form id ="IPForm" >
<button id = "btnCopy" onclick = "copyFromClipboard()">clipboardData</button>
:<textarea id = "txtIP" cols = 30 rows = 5 type = "text"></textarea>
<br/>
<br/>
IP:<input id = "txtIP1" name = "itemsIP" type = "text"></input><br><br>
IP:<input id = "txtIP2" name = "itemsIP" type = "text"></input><br><br>
IP:<input id = "txtIP3" name = "itemsIP" type = "text"></input><br><br>
IP:<input id = "txtIP4" name = "itemsIP" type = "text"></input><br><br>
<br/>
<br/>
<br/>
<input type="reset" name="reset" />
<br/>
<br/>
<button type = "button" id = "btnCopy" onclick = "copy()">copy</button>
</form>
<br/>
<br/>
</body>
</html>
JS部分代码：
function copy()
{
var strIP = document.getElementById("txtIP").value;
var arrIP= strIP.split(/\s+/);
var itemsIP = document.getElementsByName("itemsIP");
var i;
for(i = 0; i<arrIP.length; i+=1)
{
itemsIP[i].value = arrIP[i];
// alert(itemsIP[i].value)
var copyIP;
IPString = itemsIP[i].value;
IPArray = IPString.split(".");
// alert(IPArray)
// alert(IPArray[0])
if(IPArray[0] <= 0 | IPArray[0] >255)
{
alert("请输入正确的IP地址,IP范围错误")
itemsIP[i].value = "";
}
if(isNaN(Number(IPArray[0])))
{
alert("请输入正确的IP地址，IP只能是数字")
}
}
return false;
}
扫一扫
1608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
