jquery 控件失去焦点

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。失去焦点（blur）事件是 jQuery 中的一个事件类型，当元素不再被聚焦时触发。

类型

jQuery 中的失去焦点事件主要有以下几种：

基本失去焦点事件：使用 .blur() 方法。
事件委托：使用 .on('blur', ...) 方法，可以在父元素上监听子元素的失去焦点事件。

应用场景

表单验证：在用户离开输入框时进行实时验证。
动态内容更新：根据用户输入的内容动态更新页面上的其他部分。
状态管理：根据输入框是否聚焦来改变页面的某些状态。

示例代码

以下是一个简单的示例，展示了如何使用 jQuery 处理失去焦点事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Blur Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="myInput" placeholder="Type something...">
    <p id="output"></p>

    <script>
        $(document).ready(function() {
            $('#myInput').blur(function() {
                var inputValue = $(this).val();
                $('#output').text('You typed: ' + inputValue);
            });
        });
    </script>
</body>
</html>