jQuery - 用于聚焦搜索框并模拟回车键的按钮

Question

这里的想法是当人们点击“TEST”然后它会自动填充文本输入并进行搜索。因此，我想在单击文本“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>

Answer 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">

Answer 2

您发布的代码由于间距不佳而难以阅读。另外，为什么你在div里面有脚本标签？

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>