onfocusout 事件
onfocusout 事件
实例
当输入字段即将失去焦点时执行 JavaScript：
<input type="text" onfocusout="myFunction()">
完整实例：
<h1>Code not loaded</h1>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
onfocusout 事件发生在元素即将失去焦点时。
提示： onfocusout 事件类似于 onblur 事件。主要区别在于 onblur 事件不会冒泡。因此，如果您想找出元素或其子元素是否失去焦点，则应使用 onfocusout 事件。
提示：虽然 Firefox 不支持 onfocusout 事件，但您可以通过使用 onblur 事件的捕获侦听器（使用 addEventListener() 方法的可选 useCapture 参数）来了解元素的子元素是否失去焦点。
提示： onfocusout 事件与 onfocusin 事件相反。
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | 支持 | 支持 | 52.0 | 支持 | 支持 |
注释：onfocusout 事件在使用 JavaScript HTML DOM 语法的 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。但是，它应该作为 HTML 属性并使用 addEventListener() 方法（请参见下面的语法示例）。
语法
在 HTML 中：
<element onfocusout="myScript">
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例演示如何将 "onfocusout" 事件分配给 input 元素。</p>
<p>在输入字段中写一些东西，然后在字段外单击以失去焦点。</p>
<input type="text" onfocusout="myFunction()">
<script>
function myFunction() {
alert("Input field lost focus.");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
In JavaScript (may not work as expected in Chrome, Safari and Opera 15+):
object.onfocusout = function(){myScript};
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 HTML DOM 将 "onfocusout" 事件分配给 input 元素。</p>
<p>在输入字段中写一些东西，然后在字段外单击以失去焦点。</p>
<input type="text" id="fname">
<p><b>注释：</b>此例在 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。</p>
<script>
document.getElementById("fname").onfocusout = function() {myFunction()};
function myFunction() {
alert("Input field lost focus.");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("focusout", myScript);
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 addEventListener() 方法将 "focusout" 事件附加到 input 元素。</p>
<p>请在输入字段中写一些东西，然后在字段外单击以失去焦点。</p>
<input type="text" id="fname">
<p><b>注释：</b>Firefox 不支持 onfocusout 事件。</p>
<script>
document.getElementById("fname").addEventListener("focusout", myFunction);
function myFunction() {
alert("Input field lost focus.");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | FocusEvent |
| 支持的 HTML 标签： | 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title> |
| DOM 版本： | Level 2 Events |
更多实例
示例代码：
将 "onfocusin" 与 "onfocusout" 事件一起使用：
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
完整实例：
<!DOCTYPE html>
<html>
<body>
请输入您的姓名：<input type="text" id="fname" onfocusout="myFunction()">
<p>当您离开输入字段时，会触发一个将输入文本转换为大写的函数。</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
事件委托：将 addEventListener() 的 useCapture 参数设置为 true（用于 focus 和 blur）：
<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>
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>当您输入输入字段（FORM 的子）时，会触发一个将背景颜色设置为黄色的函数。当您离开输入字段时，会触发一个删除背景颜色的函数。</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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
事件委托：使用 focusin 事件：
<form id="myForm">
<input type="text" id="myInput">
</form>
<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>
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>当您输入输入字段（FORM 的子）时，会触发一个将背景颜色设置为黄色的函数。当您离开输入字段时，会触发一个删除背景颜色的函数。</p>
<form id="myForm">
<input type="text" id="myInput">
</form>
<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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
