通過按Enter啟動操作

Question

http://protected-river-1861.herokuapp.com/鏈接到我的網站

因此，我需要按“ enter”鍵啟動對Google圖片的搜索。 當前，僅在單擊按鈕時有效。

HTML：

<p>Enter the keyword to search for images</p>
<input id="search-term" type="text">
<button id="go-search">Go!</button>
<div id="search-results"></div>
<div style="width: 150px; margin:0 auto;">

application.js：

$(document).on('click', '#go-search', function() {
  findImagesOnGoogle({
    keywords: $('#search-term').val(),
    container: '#search-results'
  })
});
$(document).on('click', '#search-results img', function() {
  var url = $(this).data('url');
  $("#workspace img").remove();
  var img = $("<img>").attr('src', url);
  $("#workspace").append(img);
});

CSS，JS和HTML都位於Sublime Text中的單獨選項卡上。

Answer 1

您可以嘗試以下方法：

$(document).keyup('#search-term', function(event){
    if(event.keyCode == 13){
        $("#go-search").click();
    }
});

如果在輸入框中按下Enter鍵，它將在您的文檔上綁定一個按鈕偵聽器，並觸發單擊。

盡管我希望您圍繞這些元素創建一個表單，並對其提交事件進行必要的處理。 這樣，enter press將被自動捕獲為表單提交。 （同時單擊提交類型的按鈕。）

Answer 2

您可以嘗試：

$('#search-term').bind('keyup', function(e) {
  var code = e.keyCode || e.which;
  if(code == 13) {
    $('#go-search').click();
  }
});

$('#go-search').click(function() {
  findImagesOnGoogle({
    keywords: $('#search-term').val(),
    container: '#search-results'
  }) 
});

http://jsfiddle.net/gummiah/Ga2dG/