jQuery - 用于聚焦搜索框并模拟输入键的按钮答案

【问题标题】：jQuery - Button to focus a search box and simulate enter keyjQuery - 用于聚焦搜索框并模拟输入键的按钮
【发布时间】：2017-12-26 05:00:27
【问题描述】：

这里的想法是当人们点击“测试”时，它会自动填充文本输入并进行搜索。所以我想在单击文本“TEST”时模拟 Enter 按键。 jQuery有什么办法吗？

<div class="item" onclick="myFunc1()"><p onclick="myFunc2()">TEST</p></div>
    <script>
            function myFunc1() {
            document.getElementById("Search").value = "html templates";
            }
            function myFunc2() {
            document.getElementById("Search").focus();
            }
    </script>
    <input type="text" name="search" id="Search">
</div>

【问题讨论】：

也许这会有所帮助stackoverflow.com/questions/961532/…
问题：为什么我在您的代码中看不到任何关键事件？

标签： javascript jquery html keypress

【解决方案1】：

这是一个基于您的问题和代码的小演示：

$("#testClickHere").on('click', function() {
  $("#Search").val($(this).text()).focus().trigger('keypress');
});

$("#Search").on('input keypress', function() {
  console.log($(this).val() + " is search string. Search code here...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <p id='testClickHere'>TEST</p>
</div>

<input type="text" name="search" id="Search">

【讨论】：

【解决方案2】：

由于间距不佳，您发布的代码难以阅读。还有，为什么div里面有script标签？

IMO，最好使用按钮元素而不是段落元素来单击 TEST。此外，myFunc1() 被分配给没有任何可见样式的 div，这使得点击变得困难。

您是否添加了 myFunc2() 以将文本分配给输入？你能详细解释一下它的目的吗？

下面的代码并不完全符合您的要求，但我认为您可以根据其中的内容完成您想要的。希望对您有所帮助。

var input = document.getElementById("my_input");

var button = document.getElementById("my_button");

input.onclick = fillInput;

button.onclick = doSearch;

function fillInput(){
	input.value = "html templates";
}

function doSearch(){
	//search code here
  console.log("Searching...");
}

<input id="my_input" type="text" placeholder="click here">

<button id="my_button">TEST</button>

【讨论】：