jQuery 事件 focus() 方法

jQuery 的 focus() 事件方法用于将事件处理程序附加到 focus 事件或在选定的元素上触发该事件。当元素获得焦点时，无论是通过鼠标点击还是通过选项卡导航，都会发生 focus 事件。

语法

以下是 jQuery 事件 focus() 方法的语法：

$(selector).focus(function)

参数

此方法接受一个可选的参数作为函数，如下所述：

function - 当 focus 事件发生时要执行的可选函数。

返回值

此方法没有返回值。

示例 1

以下程序演示了 jQuery 事件 focus() 方法的使用：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below button to highlight this text.</p>
    <button>Focus on above text</button>
    <script>
        $('button').focus(function(){
            $('p').css("color", "red");
        });
    </script>
</body>
</html>

输出

以上程序显示一条消息和一个按钮。当点击按钮时，文本颜色更改为“红色”：

当用户点击显示的按钮时：

示例 2

当 input 字段获得焦点时突出显示它。

以下是 jQuery 事件 focus() 方法的另一个示例。我们使用此方法将焦点设置到输入字段：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below input field to get focused.</p>
    <label for="">Enter your name: </label>
    <input type="text" placeholder="Name">
    <script>
        $('input').focus(function(){
            $(this).css({"background-color":"green", "color":"white"});
        });
    </script>
</body>
</html>

输出

执行程序后，将显示一个输入字段。当用户点击此输入字段时，它将获得焦点：

当用户点击输入字段时：

示例 3

在不使用 function 参数的情况下使用 focus() 方法。

在下面的示例中，我们使用了 jQuery 的 focus() 事件方法，而没有指定函数。当程序执行时，输入字段将自动获得焦点：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    input{
        width: 200px;
        padding: 10px 10px;
    }
</style>
</head>
<body>
    <label for="">Enter your name: </label>
    <input type="text" placeholder="Name">
    <script>
      $('input').focus();
    </script>
</body>
</html>

输出

执行上述程序后，它显示一个获得焦点的输入字段：

jquery_ref_events.htm

打印页面