jquery focus_blur.html

最新推荐文章于 2021-06-04 16:13:36 发布

学无止境慢慢来

最新推荐文章于 2021-06-04 16:13:36 发布

阅读量107

点赞数

分类专栏： jQuery

原文链接：https://www.w3school.com.cn/jquery/event_blur.asp

版权

jQuery 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus_blur</title>

    <script src="https://www.w3school.com.cn/jquery/jquery.js"></script>
    <script>
        /*参考：https://www.w3school.com.cn/jquery/event_blur.asp
        * 知识点：
        * 1.早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。
        * 2.触发事件。语法：$(selector).blur()
        * 3.绑定事件。语法：$(selector).blur(function)
        */

        $(function () {
            // 1.绑定事件。
            // 获取焦点事件。
            $("input").focus(function () {
                $("input").css("background-color", "#FFFFCC");
            });
            // 失去焦点事件。
            $("input").blur(function () {
                $("input").css("background-color", "#D6D6FF");
            });

            // 2.触发事件。
            $("#btn1").click(function () {
                // 让input元素获取焦点。
                $("input").focus();
            });
            $("#btn2").click(function () {
                // 让input元素失去焦点。
                $("input").blur();
            });
        });
    </script>
</head>
<body>
输入你的名字：<input type="text"/>
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<button id="btn1">触发输入域的 focus 事件</button>
<button id="btn2">触发输入域的 blur 事件</button>
</body>
</html>