js怎么让动态生成的input的值随着input中输入的值改变
时间: 2023-08-10 11:03:18 浏览: 54
可以通过监听 input 的 "input" 事件,实时获取输入框中的值,然后将其设置为动态生成的 input 的 value 属性值,从而实现动态更新。示例代码如下:
HTML:
```html
<div id="container"></div>
```
JavaScript:
```javascript
const container = document.getElementById("container");
// 创建动态生成的 input
const dynamicInput = document.createElement("input");
dynamicInput.type = "text";
container.appendChild(dynamicInput);
// 监听 input 的 "input" 事件,实时更新动态生成的 input 的值
dynamicInput.addEventListener("input", function(event) {
const value = event.target.value;
// 获取所有动态生成的 input
const inputs = container.querySelectorAll("input");
// 遍历所有动态生成的 input,将其值设置为当前输入框中的值
inputs.forEach(function(input) {
input.value = value;
});
});
```
以上代码会动态生成一个 input,同时监听它的 "input" 事件,当输入框中的值发生变化时,会将所有动态生成的 input 的值更新为当前输入框中的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)