在HTML中根据一个文本框的距离创建另一个文本框
时间: 2024-05-13 14:15:15 浏览: 13
可以使用JavaScript来实现这个功能。首先,获取第一个文本框的位置信息,然后在该位置创建一个新的文本框。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>创建新文本框</title>
<style>
#box1 {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<input type="text" id="box1">
<script>
var box1 = document.getElementById("box1");
var rect = box1.getBoundingClientRect(); //获取位置信息
var box2 = document.createElement("input"); //创建新文本框
box2.type = "text";
box2.style.position = "absolute";
box2.style.top = rect.top + "px"; //设置位置
box2.style.left = rect.left + rect.width + "px";
document.body.appendChild(box2); //添加到页面
</script>
</body>
</html>
```
在这个示例中,我们首先获取了id为"box1"的文本框的位置信息,然后创建了一个新的文本框,设置了其位置信息,并添加到了页面中。你可以根据自己的需要修改示例代码。