Question

我尝试了各种解决方案，但没有一种适合我的特殊情况！我怎样才能这样做，以便当用户按下'Enter'时，表单提交＆amp;搜索。

顺便说一下，我正在使用带有AJAX的烂番茄API。

FORM

<form name="myform" action="" method="GET"><h3 class="white">Search for a movie here!:</h3><br> 
    <input type="text" id="inputbox" value="">&nbsp;
    <input type="button" id="button" value="Go!" onClick="filmlist(this.form)">
</form>

ajax.js

function filmlist(form) {
    $('#films table').empty(); //removes previous search results before adding the new ones.
    var apikey = "APIKEY";
    var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
    var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
    var query = form.inputbox.value; //uses the value from the input box as the query search
    $(document).ready(function () {
        // sends the query
        $.ajax({
            url: moviesSearchUrl + '&q=' + encodeURI(query),
            dataType: "jsonp",
            success: searchCallback
        });
    });
    // receives the results
    function searchCallback(data) {
        $('#films table').append('Found ' + data.total + ' results for ' + query);
        var movies = data.movies;
        $.each(movies, function (index, movie) {
            $('#films table').append('<tr><td width="70" rowspan="2"><a href="' + movie.links.alternate +
                '" title="Click here to view film information for ' + movie.title + '."><img class="ajaximage" src="' + movie.posters.thumbnail + '" /></a></td><td class="ajaxfilmlisttitle"><h3><a href="' + movie.links.alternate +
                '" title="Click here to view film information for ' + movie.title + '.">' + movie.title + '</a></h3>Release year: ' + movie.year + '</td></tr><tr><td class="ajaxfilmlistinfo">Audience Score: ' + movie.ratings.audience_score +
                '<br>' + 'Cinema Release Date: ' + movie.release_dates.theater +
                '<br>Runtime: ' + movie.runtime + ' minutes</td></tr>');
        });
    }
}

Answer 1

我会为它提供一个更完整的解决方案'听听Keypress进入提交'我遇到了一些问题，同时让它跨浏览器工作，也许这会为你做。

根据您的代码，这应该可以正常工作。

  $('#inputbox').live("keypress", function(e) {
     var code = (e.keyCode ? e.keyCode : e.which);
     if (code == 13) {
        e.preventDefault();
        e.stopPropagation();
        $(this).closest('form').submit();
     }
  });

Answer 2

如果用户在任何form元素上按Enter键，则会调用submit操作。您可以通过.submit收听该活动：

$('#myForm').submit(function(event){
  event.preventDefault(); // stop the actual submit
  // ajax code goes here to submit data
});

Answer 3

使用jQuery，我使用这个简短的片段来捕获 Enter 按键事件，并将一个函数绑定到它（实际上没有求助于表单和提交）：

$.fn.pressEnter = function(fn) {
  return this.each(function() {
    $(this).off('enterPress');
    $(this).on('enterPress', fn);
    $(this).keypress(function(e) {
      if (e.keyCode == 13) {
        $(this).trigger("enterPress");
      }
    });
  });
};

接下来，在元素上调用.pressEnter jQuery扩展名：

$('mySelector').pressEnter(function () {
  console.log('Enter pressed!');
});

使用Enter键按下提交JQuery表单

3 个答案: