首页js onBlur(event) 方法中如何获取当前字段的值

js onBlur(event) 方法中如何获取当前字段的值

时间: 2025-06-27 20:00:28 浏览: 8

在 JavaScript 中，`onBlur(event)` 方法通常用于监听某个元素失去焦点的事件。如果你想在这个事件触发时获取当前字段（例如输入框）的值，可以按照以下步骤操作： ### 获取字段值的方式 #### 1. 使用 `event.target` ```javascript function onBlur(event) { const value = event.target.value; // 获取失去焦点的元素的值 console.log("字段的值是:", value); } ``` 在这里，`event.target` 指向的是触发该事件的具体 DOM 元素。 --- #### 2. 直接绑定到具体的 input 上下文中 (箭头函数) 如果直接将 `onBlur` 绑定到了特定的 HTML 输入控件上，你可以通过上下文访问它。 ```html <input type="text" id="myInput"> <script> const myInput = document.getElementById('myInput'); myInput.onblur = () => { const value = myInput.value; console.log("字段的值是:", value); }; </script> ``` 这里我们明确地引用了这个指定的 `<input>` 对象，并从中读取它的 `.value` 属性。 --- #### 3. 利用原生 addEventListener 的 this 关键字当您使用传统方法添加事件处理器时，也可以利用内部的隐式 `this` 引用来表示发生事件的目标节点： ```html <input type="text" class="demoField"> <script> document.querySelector('.demoField').addEventListener('blur', function() { const currentValue = this.value; console.log(currentValue); }); </script> ``` 上述代码片段展示了如何结合 CSS 类选择器与标准浏览器提供的 API 来完成同样的目标——捕获文本框内容并在失焦时刻打印出来。

阅读全文