jQuery函数在按钮点击和按下Enter/Return键时执行

Question

jQuery函数在按钮点击和按下Enter/Return键时执行

8

我正在尝试创建一个小型搜索框，允许您根据输入字段中输入的关键词搜索Twitter。虽然它可以工作，但只有在按下提交按钮时才能工作。我也想要能够按Enter或Return键来启动搜索。我尝试使用.submit函数并将我的输入包装在一个表单元素中，但没有成功。任何见解都将不胜感激！

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$(document).ready(function(){

function(data) {

$('#startSearch').click(function(){ 

$('#tweets .results').remove();

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'

    $.getJSON(searchTerm,  function(data) {
        $.each(data.results, function() {
            $('<div class="results"></div>')
            .hide()
            .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">'  + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
            .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
            .append('<span class="userText">' + this.text + '</span>')
            .append('<time class="textTime">' + relTime(this.created_at) + '</time>')
            .appendTo('#tweets')
            .fadeIn();

        });

  });

</script>

<body>


<label id="searchLabel" for="twitterSearch">Search</label>
<input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true">
<input id="startSearch" type="submit">

<datalist id="searchSugg">
<option value="css3 mulitple backgrounds">
<option value="html5 video">
<option value="responsive web design">
<option value="twitter api">
</datalist>

<div id="tweets">
</div>
</body>

- Alvin Jones

如果您实际使用了<form>元素，您将自动捕获return/enter键并能够使用$.submit()处理程序，但我假设您正在使用AJAX？ - Jared Farrish

我尝试了这种方法，但是没有成功。首先，我将HTML元素包装在<form action="">中，在我的jQuery中使用了$('#myFormsID').submit(function(){。结果似乎什么也没发生。我是不是走错了路？ - Alvin Jones

3个回答

4

如果您想使用非突兀的JavaScript来放置事件，那么您也可以使用这个系统：

$("#element").keydown(function(event) {
if (event.keyCode == 13) {
    // do stuff
}

如果您有一个提交按钮，这是一个备选方案， #element 必须是您想要捕获事件的文本字段。

参考以下内容：答案

- Andrea V. Abbondanza

0

尝试创建键盘按键和鼠标点击的监听器。

function myFunction(e){
    if (e.which=='13' || e.type=='click'){
        // Run your code here
    }
}
$(document)
  .on('click', '#startSearch', myFunction)
  .on('keypress', this, myFunction);

实战演练 http://codepen.io/scottyzen/pen/akWPJd

- Scottyzen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cyril Tourist · Accepted Answer

编辑：正如Spudley所建议的，“使用jQuery的主要目的之一是防止您不得不在HTML标记中嵌入事件触发器”，因此更好的解决方案是

<script>
$(document).ready(function(){

function(data) {

$('#twitterSearch').keydown(function(event){    
    if(event.keyCode==13){
       $('#startSearch').trigger('click');
    }
});

$('#startSearch').click(function(){ 

$('#tweets .results').remove();

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'

    $.getJSON(searchTerm,  function(data) {
        $.each(data.results, function() {
            $('<div class="results"></div>')
            .hide()
            .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">'  + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
            .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
            .append('<span class="userText">' + this.text + '</span>')
            .append('<time class="textTime">' + relTime(this.created_at) + '</time>')
            .appendTo('#tweets')
            .fadeIn();

        });

  });

</script>

OR - 先前的提议：

<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"  >