📌  相关文章
📜  jQuery |在页面加载时将焦点设置在表单输入文本字段上(1)

📅  最后修改于: 2023-12-03 14:43:16.004000             🧑  作者: Mango

jQuery | 在页面加载时将焦点设置在表单输入文本字段上

在一个表单中，我们常常希望页面加载时将焦点自动设置在某个输入框中，这样用户就能够直接在那个输入框中输入内容，而不需要手动点击输入框。

可以使用 jQuery 来实现在页面加载时将焦点设置在表单输入文本字段上。以下是具体实现步骤：

1. 为输入框设置 ID

首先，我们需要为输入框设置一个唯一的 ID，以便在后面使用 jQuery 选中它。例如：

<input type="text" id="username" name="username">
2. 编写 jQuery 代码

接下来，我们可以使用 jQuery 的 focus() 方法将焦点设置在某个元素上。我们可以在页面加载时执行该方法，以实现自动设置焦点的效果。以下是示例代码：

$(document).ready(function(){
  $('#username').focus();
});

代码解析：

  • $(document).ready() 用来在文档加载完成后执行代码。
  • $('#username') 选中 ID 为 username 的输入框。
  • focus() 方法将焦点设置在该输入框上。
3. 测试代码

最后，我们可以将以上代码复制到 HTML 页面中，并打开页面测试效果。当页面加载完成后，输入框中将自动出现光标，表示焦点已设置在该输入框中。

完整代码

以下是完整的 HTML 代码，可供参考：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>设置焦点</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#username').focus();
      });
    </script>
  </head>
  <body>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username">
    </form>
  </body>
</html>

以上是使用 jQuery 在页面加载时将焦点设置在表单输入文本字段上的介绍。