如何在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中通过点击按钮在搜索表单中设置光标？