html中两个input文本框的值动态联动
时间: 2024-04-30 11:21:57 浏览: 14
可以通过JavaScript实现两个input文本框的值动态联动,具体实现方法如下:
1. 获取两个input元素:
```html
<input type="text" id="input1">
<input type="text" id="input2">
```
2. 给第一个input元素绑定oninput事件,在事件处理函数中获取第一个input元素的值,并将其赋值给第二个input元素:
```javascript
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
input1.oninput = function() {
input2.value = input1.value;
}
```
这样,每当第一个input元素的值发生改变时,第二个input元素的值就会同步更新为第一个input元素的值。
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态联动</title>
</head>
<body>
<input type="text" id="input1">
<input type="text" id="input2">
<script>
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
input1.oninput = function() {
input2.value = input1.value;
}
</script>
</body>
</html>
```