如何在java脚本中用enter键触发按钮？/如何给文本框和搜索按钮一个ID？

对不起，我知道这个问题已被问及之前回答，但我似乎无法将其实施到我的代码。对编程来说很新颖，并且挣扎不已。很简单的东西，我有一个搜索栏和一个搜索按钮。我想要做的是，而不是必须物理地点击搜索按钮来搜索我想要的，我想有能力点击可以搜索的输入键。这是搜索栏和按钮的代码。简单的东西。如何在java脚本中用enter键触发按钮？/如何给文本框和搜索按钮一个ID？

<div class="ui-widget"> <!-- only for css purposes-->     
<input id="search"> <!-- for the search box-->     
<button type="button" onclick="searchresult()">Search</button> <!-- search button--> 
</div>

因此，在这一刻，当你点击搜索按钮，它会激活javascript函数我有是：

function searchresult() { 
    //find the result 
}

这反过来会找到你想要的结果。致命的东西。我还没有包含JavaScript函数内部的代码，因为我们不需要它来解决这个问题，而且它相当长。

所以基本上我想输入键能够激活搜索结果的JavaScript功能与搜索按钮一样。我知道你可以使用jQuery keypress（）方法来做到这一点。这里是可以用来做什么，我想知道，但我只是不知道如何落实到什么我的代码：

$("#id_of_textbox").keyup(function(event){ 
    if(event.keyCode == 13){ 
    $("#id_of_button").click(); 
    } 
});

我知道这是在HTML中使用id属性的编码以及但我不知道如何我会去正确分配搜索按钮和文本框每个id然后我可以在代码中使用我刚才在上面，然后将允许我使用回车键作为搜索以及。

所以，如果任何人都可以告诉我如何使用我发现的jQuery代码来解决我的问题，那将是辉煌的。完全开放给任何其他建议关于我会怎样去做。谢谢大家的时间和关注！

来源

2016-07-14 Cathal Brady

的可能的复制[触发一个按钮，通过JavaScript点击回车键文本框中（http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the -enter-key-in-a-text-box） –

只是将你的搜索输入和按钮封装在表单标签中。当你在窗体内聚焦一个元素时，它会触发“enter”。 – Joonas89

使用下面的代码（下文解释）：

function searchresult() { 
 
    console.log('searching'); 
 
    //find the result 
 
} 
 

 
$("#search").keyup(function(event) { 
 
    if (event.keyCode == 13) { 
 
    $("#searchButton").click(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ui-widget"> 
 
    <input id="search"> 
 
    <button type="button" id="searchButton" onclick="searchresult()">Search</button> 
 
</div>

这样做是将挂钩事件到输入框id为search和whenver它接收到keyup （密钥发布）事件，它会检查它是否是Enter密钥，如果是，则按idsearchButton（我添加了该id作为示例）触发该按钮的click事件。您的搜索按钮的click事件被挂在searchResult()功能，这反过来从调用。

如果您需要关于如何事件处理工作在jQuery的更多信息，请jQuery's Handling Events page。

来源

2016-07-14 12:05:20

您可以将ID分配给您的搜索按钮：

$("#id_of_textbox").keyup(function(event) { 
    if (event.keyCode == 13) { 
     $("#search_key").trigger('click'); 
    } 
})

来源

2016-07-14 12:04:49

$('#search").change(function() { 
    searchResult(); 
});

别：

<button type="button" onclick="searchresult()" id="search_key">Search</button>

然后你就可以使用jQuery#trigger

JS触发按钮的点击动作甚至不屑于寻找“输入”键;只要注意输入值的变化（按下Enter键后会出现这种情况，或模糊场地）。

来源

2016-07-14 12:05:05 VoteyDisciple

你真的应该考虑使用一种形式。

function search_function(search_terms){ 
 
    // Do your search action here 
 
    alert(search_terms); 
 
}; 
 
$(function(){ 
 
    $("#search").on("submit", function(e){ 
 
    search_function($("#search_terms").val()); 
 
    e.preventDefault(); // Prevents submitting in most browsers 
 
    return false; // Prevents submitting in some other browsers 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id='search'> 
 
    <input type='text' id='search_terms' placeholder='Search' /> 
 
    <button>Search</button> 
 
</form>

或者这里是纯JS的例子

function search_function(search_terms){ 
 
    // Do your search action here 
 
    alert(search_terms); 
 
}; 
 
document.addEventListener("DOMContentLoaded", function(){ 
 
    document.getElementById("search") 
 
    .addEventListener("submit", function(e){ 
 
    search_function(document.getElementById("search_terms").value); 
 
    e.preventDefault(); // Prevents submitting in most browsers 
 
    return false; // Prevents submitting in some other browsers 
 
    }); 
 
}, false);

<form id='search'> 
 
    <input type='text' id='search_terms' placeholder='Search' /> 
 
    <button>Search</button> 
 
</form>

来源

2016-07-14 12:06:25

您可以使用form因为你想要回车键，并提交它的onsubmit事件点击做同样的事情。

<form action="" method="" onsubmit="searchresult(this);"> 
    <input type="text" name="query" /> 
    <input type="submit" value="Search" /> 
</form>

但不要忘记使用event.preventDefault()或return false。

来源

2016-07-14 12:08:48

如何在java脚本中用enter键触发按钮？/如何给文本框和搜索按钮一个ID？

回答

相关问题