如何在java腳本中用enter鍵觸發按鈕？/如何給文本框和搜索按鈕一個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函數內部的代碼，因爲我們不需要它來解決這個問題，而且它相當長。

所以基本上我想輸入鍵能夠激活搜索結果的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和whenver它接收到keyup （密鑰發佈）事件，它會檢查它是否是Enter密鑰，如果是，則按idsearchButton（我添加了該id作爲示例）觸發該按鈕的click事件。您的搜索按鈕的click事件被掛在searchResult()功能，這反過來從調用。

如果您需要關於如何事件處理工作在jQuery的更多信息，請jQuery's Handling Events page。

Answer 2

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

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

Answer 3

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

別：

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

然後你就可以使用jQuery#trigger

JS觸發按鈕的點擊動作甚至不屑於尋找「輸入」鍵;只要注意輸入值的變化（按下Enter鍵後會出現這種情況，或模糊場地）。

Answer 4

你真的應該考慮使用一種形式。

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 5

您可以使用form因爲你想要回車鍵，並提交它的onsubmit事件點擊做同樣的事情。

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

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