onfocusout 事件

事件对象参考手册 事件对象

在 input 输入框即将失去焦点时执行 JavaScript :

输入您的名字： <input type="text" id="fname" onfocusout="myFunction()">
<p>当你离开 input 输入框时，JavaScript函数将被触发，并将输入框中的小写字母转为大写。</p>
<p><strong>注意：</strong> Firefox 浏览器不支持 onfocusout 事件。</p>
<script>
  function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
  }
</script>

尝试一下 »

本章节底部包含更多实例。

定义和用法

onfocusout 事件在元素即将失去焦点时触发。

提示： onfocusout 事件类似于 onblur 事件。 主要的区别是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否获取焦点，需要使用 onfocusout 事件。

提示： 虽然 Firefox 不支持 onfocusout 事件， 但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否失去焦点。

提示： onfocusout 事件的相反事件为 onfocusin 事件。

浏览器支持

事件
onfocusout Yes Yes 不支持 Yes Yes

注意： 在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusin 事件可能无法正常工作。 但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法可以正常工作。

语法

HTML 中:

<element onfocusout="myScript">
<p>该实例演示了如何向 input 元素中添加 "onfocusout" 事件。</p>
<p>在 input 输入框中尝试输入，并点击输入框外的区域（输入框失去焦点）。</p>
<input type="text" onfocusout="myFunction()">
<p><strong>注意：</strong> Firefox 浏览器不支持 onfocusout 事件。</p>
<script>
  function myFunction() {
    alert("Input 字段失去焦点。");
  }
</script>

尝试一下 »

JavaScript (Chrome, Safari 和 Opera 15+ 可能无法正常工作) 中:

object.onfocusout = function() {
  myScript
};
<p>该实例演示了如何使用 HTML DOM 向 input 元素中添加 "onfocusout" 事件。</p>
<p>在 input 输入框中尝试输入，并点击输入框外的区域（输入框失去焦点）。</p>
<input type="text" id="fname">
<p><strong>注意：</strong> Firefox 浏览器不支持 onfocusout 事件。</p>
<p><strong>注意：</strong> Chrome, Safari 和 Opera 15+ 浏览器可能无法工作。</p>
<script>
  document.getElementById("fname").onfocusout = function() {
    myFunction()
  };

  function myFunction() {
    alert("Input 字段失去焦点。");
  }
</script>

尝试一下 »

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("focusout", myScript);
<p>该实例演示了如何使用 addEventListener() 方法向 input 元素中添加 "onfocusout" 事件。</p>
<p>在 input 输入框中尝试输入，并点击输入框外的区域（输入框失去焦点）。</p>
<input type="text" id="fname">
<p><strong>注意：</strong> Firefox 浏览器不支持 onfocusout 事件。</p>
<script>
  document.getElementById("fname").addEventListener("focusout", myFunction);

  function myFunction() {
    alert("Input 字段失去焦点。");
  }
</script>

尝试一下 »

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡: Yes
是否可以取消: No
事件类型: FocusEvent
支持的 HTML 标签: 所有 HTML 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>

更多实例

使用 "onfocusin" 和 "onfocusout" 事件:

<p>当在 input 框输入时（获取焦点），一个函数将被触发，并设置背景颜色。当离开 input 输入框时（失去焦点）,另一个函数将被触发并设置对应的背景颜色。</p>
输入您的名字: <input type="text" id="myInput" onfocusin="focusFunction()" onfocusout="blurFunction()">
<p><strong>注意：</strong> Firefox 浏览器不支持 onfocusin 事件。</p>
<script>
  // 获取焦点 = 修改输入框的背景演示为黄色
  function focusFunction() {
    document.getElementById("myInput").style.background = "yellow";
  }
  // 失去焦点 = 修改输入框的背景演示为红色
  function blurFunction() {
    document.getElementById("myInput").style.background = "red";
  }
</script>

尝试一下 »


事件委托：设置 addEventListener() 的 useCapture 参数为 true (用于获取焦点和失去焦点):

<p>当在 input 框输入时（获取焦点，FORM表单是子元素），一个函数将被触发，并设置背景颜色为黄色。当离开 input 输入框时（失去焦点）,另一个函数将被触发并移除背景颜色。</p>
<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
  var x = document.getElementById("myForm");
  x.addEventListener("focus", myFocusFunction, true);
  x.addEventListener("blur", myBlurFunction, true);

  function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
  }

  function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
  }
</script>

尝试一下 »


事件委托：使用 focusout 事件 ( Firefox 浏览器不支持 ):

<p>当在 input 框输入时（获取焦点，FORM表单是子元素），一个函数将被触发，并设置背景颜色为黄色。当离开 input 输入框时（失去焦点）,另一个函数将被触发并移除背景颜色。</p>
<form id="myForm">
  <input type="text" id="myInput">
</form>
<p><strong>注意：</strong> Firefox 浏览器不支持 onfocusin 事件。</p>
<script>
  var x = document.getElementById("myForm");
  x.addEventListener("focusin", myFocusFunction);
  x.addEventListener("focusout", myBlurFunction);

  function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
  }

  function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
  }
</script>

尝试一下 »

事件对象参考手册 事件对象