【问题标题】:Initiate action by pressing enter按回车键启动操作
【发布时间】:2014-07-28 13:36:36
【问题描述】:

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 中的不同选项卡上。

【问题讨论】:

    标签: javascript search input enter


    【解决方案1】:

    您可以尝试以下方法:

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

    它在您的文档上绑定一个按钮向上监听器,如果在输入框中按下回车键,则触发点击。

    虽然我宁愿你围绕元素创建一个表单并在它的提交事件上做必要的事情。这样,输入新闻将自动被捕获为表单提交。 (以及单击提交类型的按钮。)

    【讨论】:

    • 您好,感谢您抽出宝贵时间回复。我在问题中标记的代码正下方添加了该代码,但它没有工作。顺便说一句,我是一个完整的初学者..
    • 会的 :) 虽然我没有足够的代表来投票,并且不能再接受四分钟的回答。
    【解决方案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/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-05-09
      • 2017-01-15
      • 2019-08-02
      • 2011-08-23
      • 2012-09-19
      • 2017-05-27
      • 2018-12-04
      相关资源
      最近更新 更多