js 同时监听两个input
时间: 2023-07-08 17:16:57 浏览: 142
您可以使用类似的方法来监听两个 `input` 元素,只需要将事件监听器添加到每个 `input` 上即可。示例代码如下:
```javascript
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
input1.addEventListener('input', event => {
if (event.target.value.trim().length > 0) {
console.log('输入框1有值');
} else {
console.log('输入框1没有值');
}
});
input2.addEventListener('input', event => {
if (event.target.value.trim().length > 0) {
console.log('输入框2有值');
} else {
console.log('输入框2没有值');
}
});
```
在这个示例中,我们使用 `querySelector` 方法分别获取了两个 `input` 元素,并为它们添加了 `input` 事件监听器。在每个事件处理程序中,我们都使用了类似的方式来获取输入框的值,并判断它是否为空。当输入框的值发生变化时,相应的事件处理程序就会被触发,从而可以根据输入框的值来做出相关的操作。
相关问题
js怎么同时监听多个input值变化
您可以使用 `addEventListener` 方法来为多个输入字段添加 "input" 事件监听器。 例如:
```
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
input1.addEventListener('input', function() {
console.log(input1.value);
});
input2.addEventListener('input', function() {
console.log(input2.value);
});
```
这样,当两个输入字段的值改变时,都会触发相应的事件监听器。
如果您想要监听多个输入字段的值变化,但是希望使用相同的监听器函数,则可以使用下面的代码:
```
const inputs = document.querySelectorAll('input');
function handleInput() {
console.log(this.value);
}
inputs.forEach(input => input.addEventListener('input', handleInput));
```
这样,当任意一个输入字段的值发生变化时,都会触发相同的监听器函数 `handleInput`。
js监听input框内容改变
在JavaScript中,我们可以使用addEventListener()方法来监听input框内容的改变。
首先,我们需要获取到需要监听的input元素。可以通过getElementById()方法获取到指定id的元素,或者通过querySelector()方法来获取指定选择器的元素。
然后,我们可以使用addEventListener()方法来给该input元素添加一个事件监听器。该方法需要传入两个参数,第一个参数是要监听的事件类型,这里我们监听的是"input"事件,即输入框内容改变时触发的事件。第二个参数是一个回调函数,当事件触发时会执行该回调函数。
在回调函数中,我们可以通过event对象来获取到input框的当前内容。可以使用event.target.value来获取到输入框的值。
下面是一个简单的示例代码:
```html
<input type="text" id="myInput">
<script>
// 获取input元素
var input = document.getElementById("myInput");
// 添加事件监听器
input.addEventListener("input", function(event) {
// 获取输入框的值
var value = event.target.value;
// 在控制台打印输入框的值
console.log(value);
});
</script>
```
以上代码会监听id为"myInput"的input元素的内容变化,并在控制台打印输入框的值。你可以根据需要进一步处理输入框的内容。