<think>好的，用户现在的问题是“更改
输入框的
值时，怎么获取
值？”，需要解释在网页中如何监听
输入框的变化并获取其
值。首先，我需要回忆HTML
输入框的事件类型，比如
input事件或change事件，然后说明如何通过JavaScript监听这些事件，并在事件处理函数中获取
输入框的
值。
首先，用户之前的需求是创建一个带有两个
输入框和提交按钮的页面，现在想知道当
输入框的
值改变
时如何获取最新的
值。需要分步骤解释：选择
输入框元素、添加事件监听器、在事件处理函数中访问value属性。
需要提到常见的事件类型，比如
input事件（实
时监听
输入）和change事件（失去焦点或回车后触发）。还要说明如何通过querySelector或getElementById获取
输入框元素，然后绑定事件处理函数。
另外，可能需要给出代码示例，比如在HTML中添加script标签，或者在外部JS文件中编写代码，展示如何监听事件并获取
值。同
时，可能需要解释event.target.value的作用，以及如何区分不同的
输入框（比如通过id或类名）。
还要注意用户可能的疑问，比如实
时获取和非实
时获取的区别，如何处理多个
输入框的情况，以及如何避免内存泄漏（比如移除事件监听器，但可能用户暂
时不需要这么深入）。
最后，确保回答清晰，步骤明确，代码示例正确，并覆盖用户可能关心的点，比如不同事件的使用场景。
</think>在网页中监听
输入框值的变化并获取最新
值，主要通过 JavaScript 的**事件监听**实现。以下是具体实现方法，结合代码示例说明：
### 核心思路
1. **选择
输入框元素**：通过 `document.querySelector` 或 `document.getElementById` 等方法获取
输入框的 DOM 元素。
2. **绑定事件监听器**：为
输入框绑定 `
input`（实
时输入）或 `change`（
值确认变更）事件，监听
值的变化。
3. **获取最新
值**：在事件处理函数中，通过 `event.target.value` 或直接访问
输入框的 `value` 属性获取当前
值。
### 具体实现步骤与代码示例
#### 1. HTML 结构（基于用户之前的代码）
假设
输入框结构如下（已添加 `id` 方便选择）：
```html
<div class="
input-group">
<
input type="text" id="
input1" placeholder="
输入框1">
<
input type="text" id="
input2" placeholder="
输入框2">
</div>
<button class="submit-btn">提交</button>
```
#### 2. JavaScript 监听
输入变化
在 `<script>` 标签或外部 JS 文件中编写代码，监听
输入框的 `
input` 事件（实
时获取
输入值）：
```javascript
// 获取
输入框元素（通过 id 选择）
const
input1 = document.getElementById('
input1');
const
input2 = document.getElementById('
input2');
// 监听
input 事件（实
时触发，
输入过程中持续触发）
input1.addEventListener('
input', function(event) {
const value1 = event.target.value; // 获取
输入框1的当前
值
console.log('
输入框1的最新
值：', value1);
});
input2.addEventListener('
input', function() {
const value2 = this.value; // 也可以用 this.value 获取当前
输入框的
值
console.log('
输入框2的最新
值：', value2);
});
```
#### 3. 事件类型说明（`
input` vs `change`）
- **`
input` 事件**：
输入框内容**实
时变化
时触发**（如打字、删除、粘贴），适合需要实
时响应的场景（如搜索联想、字数统计）。
- **`change` 事件**：
输入框内容**确认变更
时触发**（如失去焦点、通过下拉选择选项），适合需要最终结果的场景（如表单提交前验证）。
**示例：使用 `change` 事件**
```javascript
input1.addEventListener('change', function() {
console.log('
输入框1的
值已确认变更为：', this.value);
});
```
#### 4. 同
时监听多个
输入框
如果需要统一处理多个
输入框的变化，可以通过**类名选择**或**循环绑定**：
```javascript
// 通过类名选择所有
输入框（假设
输入框有共同类名 "form-
input"）
const
inputs = document.querySelectorAll('.form-
input');
// 循环绑定事件
inputs.forEach(
input => {
input.addEventListener('
input', function() {
console.log(`${this.placeholder} 的
值：`, this.value);
});
});
```
### 总结
通过绑定 `
input` 或 `change` 事件，结合 `event.target.value` 或 `this.value`，可以轻松获取
输入框变化后的
值。选择 `
input` 还是 `change` 事件取决于具体需求（实
时性 vs 最终结果）。
本文介绍了一个简单的 Angular 应用示例，展示了如何使用 ng-model 进行双向数据绑定。通过<input>元素与 fuTemplateName 的绑定，实现了界面与数据的同步更新。
扫一扫
2879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
