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

时间:2017-12-26 05:00:28

标签: javascript jquery html keypress

这里的想法是当人们点击“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>

2 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
$("#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...");
});
&#13;
<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">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

由于间距不佳,您发布的代码难以阅读。另外,为什么你在div中有脚本标签?

IMO,使用按钮元素而不是段落元素来点击TEST会更好。此外,myFunc1()被分配给一个没有任何可见样式的div,这使得很难点击。

您是否添加了myFunc2()以便为输入分配文本?你能解释一下它的目的吗?

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

&#13;
&#13;
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...");
}
&#13;
<input id="my_input" type="text" placeholder="click here">

<button id="my_button">TEST</button>
&#13;
&#13;
&#13;