Question

http://protected-river-1861.herokuapp.com/链接到我的网站

因此，我需要在按下“输入”键时启动对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();
    }
});

它会在文档上绑定一个按钮向上侦听器，如果在输入框中按下了输入，则会触发一次单击。

虽然我宁愿你创建一个围绕元素的表单，并且需要在它上面提交事件。这样，输入按下将自动捕获为表单提交。（同时点击提交类型的按钮。）

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/

按Enter键启动操作

2 个答案: