jQuery事件--blur()和focus()

blur([[data],fn])

概述

当元素失去焦点时触发 blur 事件。

这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

参数

fn 在每一个匹配元素的blur事件中绑定的处理函数

[data],fn data:blur([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的blur事件中绑定的处理函数

focus([[data],fn])

概述

当元素获得焦点时，触发 focus 事件。

可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

参数

fn 在每一个匹配元素的focus事件中绑定的处理函数。

[data],fn data:focus([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的focus事件中绑定的处理函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <title></title>
        <script>
            var blurText="失去焦点";
            var focusText="获得焦点";
            $(document).ready(function(){
                $("#input").blur(blurText,function(){
                    $(this).val(blurText);
                    $(this).removeClass("main");
                });
                
                $("#input").focus(focusText,function(){
                    $(this).val(focusText);
                    $(this).addClass("main");
                });
            });
        </script>
        <style>
            .main{
                border: solid;
            }
        </style>
    </head>
    <body>
        <input id="input" type="text" />
    </body>
</html>

posted @ 2018-12-03 16:30 风拂晚柳阅读(584) 评论(0) 收藏举报

刷新页面返回顶部