jQuery focusin() 方法

  • 定义和用法

    当元素(或在其内的任意元素)获得焦点时,会触发 focusin 事件。
    focusin() 方法会附加一个函数。以在元素或其内部任何元素获得焦点事件时运行。
    focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。
    提示:当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
    提示:该方法通常与 focusout() 方法一起使用。
  • 语法

    $(selector).focusin(function)
  • 参数

    参数 描述
    function 可选。规定 focusin 事件发生时要运行的函数。
  • 示例

    下例演示了当 <div> 元素或其任意子元素获得焦点时,设置 <div> 元素的背景颜色:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到蝴蝶教程</title>
        //此版本是百度cdn 1.11.1,当然你可以使用更高的版本,从2.0版本以上的是不支持ie6-8的
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("div").focusin(function(){
                    $(this).css("background-color","#f0f");
                });
                $("div").focusout(function(){
                    $(this).css("background-color","#fff");
                });
            });
        </script>
    </head>
    <body>
        <div style="border: 1px solid black;padding:10px;">
                First name: <input type="text"><br>
                Last name: <input type="text">
        </div>
        <p>点击输入框获取焦点,点击输入框外的部分失去焦点。</p>
    </body>
    </html>
    
    尝试一下