监听input输入框内的值发生变化时,打印文本
时间: 2023-07-20 13:16:59 浏览: 67
当输入框的值发生变化时,可以使用 JavaScript 中的 `input` 事件来监听并获取输入框的值。可以使用 `addEventListener` 方法来为输入框添加 `input` 事件监听器,然后在事件处理程序中获取输入框的值并将其打印出来。
以下是一个示例代码:
```html
<input type="text" id="myInput">
<script>
const input = document.getElementById("myInput");
input.addEventListener("input", function() {
const text = input.value;
console.log(text);
});
</script>
```
在这个例子中,我们首先获取 id 为 `myInput` 的输入框元素,并使用 `addEventListener` 方法添加一个 `input` 事件监听器。当输入框的值发生变化时,事件处理程序会获取输入框的值并将其打印到控制台中。
相关问题
监听输入框内值发生变化时,打印文本
您可以使用 JavaScript 中的事件监听器来实现此功能。例如,您可以使用 `addEventListener` 方法监听输入框 `input` 事件,然后在事件处理程序中获取输入框的值并将其打印出来。
以下是一个示例代码:
```html
<input type="text" id="myInput">
<script>
const input = document.getElementById("myInput");
input.addEventListener("input", function() {
const text = input.value;
console.log(text);
});
</script>
```
在这个例子中,我们首先获取 id 为 `myInput` 的输入框元素,并使用 `addEventListener` 方法添加一个 `input` 事件监听器。当输入框的值发生变化时,事件处理程序会获取输入框的值并将其打印到控制台中。
<div class="layui-input-suffix Unit" style="display: none"> 元/Nm³ (任意单位) </div> <input type="text" placeholder="请输入" value="元/Nm³" class="layui-input"> 监听input框输入值修改div内文本
可以使用 JavaScript 监听 input 框的输入事件,然后根据输入的值动态修改 div 内的文本。可以使用以下代码实现:
```html
<div class="layui-input-suffix Unit">元/Nm³ (任意单位)</div>
<input type="text" placeholder="请输入" value="元/Nm³" class="layui-input" id="input-unit">
<script>
const input = document.getElementById('input-unit');
const unitDiv = document.querySelector('.layui-input-suffix.Unit');
input.addEventListener('input', e => {
unitDiv.textContent = e.target.value + ' (任意单位)';
});
</script>
```
这样每次输入框的值发生变化,都会触发 `input` 事件,然后将输入框的值和固定字符串拼接起来,赋值给 div 的文本内容。