onblur事件
时间: 2025-05-25 16:02:34 浏览: 11
### 关于 `onblur` 事件的用法
`onblur` 是 JavaScript 中的一个常见事件,当某个元素失去焦点时会触发此事件[^1]。它通常用于表单验证或其他需要检测用户交互离开特定控件的情况。
#### 示例代码
以下是一个简单的例子,展示如何使用 `onblur` 来处理输入框失去焦点时的行为:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnBlur Example</title>
<script>
function handleBlur() {
const inputElement = document.getElementById('exampleInput');
if (inputElement.value.trim() === '') {
alert('请输入有效的内容!');
}
}
function onFocusClear() {
const inputElement = document.getElementById('exampleInput');
if (inputElement.value === '默认提示') {
inputElement.value = '';
}
}
</script>
</head>
<body>
<form action="#" method="get">
<label for="exampleInput">示例输入:</label>
<input type="text" id="exampleInput" value="默认提示"
onblur="handleBlur()" onfocus="onFocusClear()">
</form>
</body>
</html>
```
在这个示例中:
- 输入框初始显示“默认提示”,当获得焦点时清除内容。
- 如果用户未填写任何内容并移开焦点,则弹出警告消息提醒用户输入有效数据。
#### DOM 对象支持情况
HTML 的 DOM 结构中定义了多种事件对象,其中 `onblur` 属于焦点类事件之一[^2]。几乎所有可聚焦的 HTML 元素都支持该事件,比如 `<input>`、`<textarea>` 和 `<select>` 等标签。
#### 实际应用场景
实际开发过程中可以利用 `onblur` 完成一些功能性的需求,例如自动填充建议或者校验字段合法性[^3]。下面是一段更复杂的场景演示——动态隐藏/显示占位符文字:
```html
<form action="/submit" method="post">
<div style="position:relative;">
<input name="username" id="username" type="text" placeholder="用户名"
onblur="if(this.value===''){this.placeholder='用户名';}"
onfocus="this.placeholder='';"/>
</div>
</form>
```
在此案例里,通过设置和重置 `placeholder` 属性实现了更加友好的用户体验效果。
---
阅读全文
相关推荐


















