如何在java腳本中使用回車鍵觸發按鈕？/如何給文本框和搜索按鈕一個ID？

Question

對不起，我知道這個問題之前已經被問過並回答過，但我似乎無法將其實現到我的代碼中。 非常新的編程和掙扎相當多。 這里很簡單的東西我有一個搜索欄和一個搜索按鈕。 我想要做的是，而不是必須物理點擊搜索按鈕來搜索我想要的，我希望能夠能夠點擊也可以搜索的回車鍵。 這是搜索欄和按鈕的代碼。 簡單的東西。

<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函數內部的代碼，因為我們不需要它來解決這個問題而且它非常冗長。

所以基本上我希望enter鍵能夠以與搜索按鈕相同的方式激活searchresult javascript函數。 我知道你可以使用jQuery keypress（）方法來做到這一點。 這里的代碼可以用來做我想知道的但我只是不知道如何將它實現到我所擁有的：

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

我知道在HTML編碼中使用的id屬性，但我不知道我將如何正確地分配搜索按鈕和文本框一個id，然后我可以在我上面的代碼中使用然后反過來允許我使用回車鍵作為搜索。

所以如果有人能告訴我如何使用我發現的jQuery代碼來解決我的問題，那將是非常棒的。 完全接受任何其他關於我將如何去做的建議。 謝謝大家的時間和關注！

Answer 1

使用以下代碼（以下說明）：

 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的輸入框，當它收到keyup （密鑰釋放）事件時，它將檢查它是否是Enter鍵，如果是，則觸發click事件。 id searchButton按鈕（我添加了id作為示例）。 您的搜索按鈕的click事件連接到searchResult()函數，而該函數又從該函數調用。

如果您需要有關事件處理在jQuery中如何工作的更多信息，請查看jQuery的“處理事件”頁面 。

Answer 2

你真的應該考慮使用表格。

 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> 

Answer 3

您可以將ID分配給搜索按鈕：

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

然后，您可以使用jQuery＃trigger觸發按鈕上的單擊操作

JS：

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

Answer 4

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

甚至不用費心去尋找“輸入”鍵; 只需要注意要改變的輸入值（按下輸入或模糊字段時會發生這種情況）。

Answer 5

您可以使用form並且它是onsubmit事件，因為您需要輸入密鑰並提交單擊以執行相同的操作。

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

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