如何在jQuery中通过点击按钮在搜索表单中设置光标

如何在jQuery中通过点击按钮在搜索表单中设置光标

给定一个搜索表单,我们需要使用jQuery来设置搜索表单中的光标,点击一个按钮。这可以通过使用focus()方法和click()方法来实现。

我们将创建一个有一个文本框和一个按钮的网页。我们将使用jQuery添加功能,当点击按钮时,光标将被设置到文本框中。现在让我们来讨论一些我们将在实现中使用的方法。

click()方法: jQuery中的click()方法在触发点击事件时启动点击事件或运行传递给它的函数。

语法:

$(selector).click(function);

参数:它接受一个可选的参数 “函数”,它将在发生点击事件时运行。

返回值:它返回带有指定功能的选定元素来执行。

focus()方法: focus()方法触发了焦点事件,或者在焦点事件被触发时运行传递给它的函数。focus()方法可以通过使用选择器来聚焦一个特定的元素。

语法:

$(selector).focus()

参数:它接受一个可选的参数 “函数”,它将在焦点事件发生时运行。

jQuery CDN链接:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

步骤:

  • 将jQuery CDN添加到脚本中,或将它们下载到你的本地机器上。
  • 使用bootstrap创建一个文本框和按钮,这样它就会很好看。
  • 打开脚本标签,使用click()函数编写点击按钮的处理函数。
  • 在点击处理程序中,使用focus()方法,通过选择器将光标设置到文本框上。

示例:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <strong>Set cursor in search form</strong>
    <br />
    <form class="form-inline mt-4">
        <input type="text" class="form-control mx-2"
            id="textInput" placeholder="Focus Me...">
             
        <button id="focusButton" type="button"
            class="btn btn-secondary">
            Click Here To Focus
        </button>
    </form>
 
    <script>
        (document).ready(function () {
            ('#focusButton').click(function () {
                $("#textInput").focus();
            })
        });
    </script>
</body>
 
</html>

输出:

如何在jQuery中通过点击按钮在搜索表单中设置光标?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法