HTML onblur 事件属性

在元素失去焦点时触发

示例

当用户离开时验证输入字段：

输入你的名字: <input type="text" name="fname" id="fname" onblur="myFunction()">
<p>当您离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

<input type="text" name="fname" id="fname" onblur="myFunction()">

定义和使用

onblur 属性会在元素失去焦点时触发。

onblur 最常与表单验证代码一起使用（例如，当用户离开表单字段时）。

提示： onblur 属性与 onfocus 属性相反。

浏览器支持

事件属性
onblur	Yes	Yes	Yes	Yes	Yes

语法

<element onblur="script">

属性值

值 Value	描述 Description
script	要在 onblur 上运行的脚本

技术细节


支持的 HTML 标签:	所有 HTML 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>

更多示例

将 onblur 与 onfocus 属性一起使用：

<p>当您输入输入字段时，会触发将背景颜色设置为黄色的功能。 当您离开输入字段时，会触发一个函数，将背景颜色设置为红色。</p>
输入你的名字：<input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()">
<script>
  // 焦点 = 将输入的背景颜色更改为黄色
  function focusFunction() {
    document.getElementById("myInput").style.background = "yellow";
  }
  // 无焦点 = 将输入的背景颜色更改为红色
  function blurFunction() {
    document.getElementById("myInput").style.background = "red";
  }
</script>

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

HTML 索引 (字母排序)

GitHub 上编辑此页 2022/05/10