jquery focus_blur.html

仇正豪
2023-12-01
<!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>
jquery focus_blur.html

相关阅读

相关文章

相关问答
