按键盘ENTER提交ajax请求

submit ajax request on keyboard ENTER

本文关键字：ajax 请求 提交 ENTER 键盘      更新时间：2023-09-26

我已经点击jquery提交ajax请求。

没有表单

我想键盘输入也用于提交ajax请求。

我有很多这样的按钮，这让我很困惑，因为我不能简单地做:

$('#myForm input:text').keypress(function (e) {
  if (e.which == 13) {
    $("#button1").click()
  }
});

我当前的on click事件看起来像这样(我如何扩展它以适应ENTER?)

//Check answer
$("body").on("click", ".unlocked figcaption .check", function(){
    var logo_id = $(this).parent().attr("id");
    var answer = $("#" + logo_id + " input[name=guesslogo]");
    var logo_lang = answer.attr("data-lang");
    answer.removeAttr("class").attr("disabled","true");
        //Submit answer for review
        $.ajax({
            url: "actions.php",
            get: "GET",
            data: "answerswer=" + answer.val() + "&logo_id=" + logo_id + "&logo_lang=" + logo_lang,
            cache: false,
            success: function (data){
                var response = jQuery.parseJSON(data);
                if (response.result == 1) {
                    answer.addClass("correct").siblings(".clear, .hint").fadeTo("slow","0.4");
                    answer.parent().append('<div class="alert"><h3>Correct!</h3> <p>Score: '+ response.score +'</p></div>');
                    $("#" + logo_id).siblings(".logo").removeClass("logo").addClass("answerswered").removeAttr("style");
                    snd_correct.play();
                        //update user_score and user_level values in leaderboard and header widgets
                        var this_user = $("header aside").attr("data-usern");
                        if (this_user) {
                            var this_user_score = $("header aside .user_score").text();
                            var this_user_level = $("header aside .user_level").text();
                                $("[data-usern="+ this_user +"] .user_score").empty().append(parseInt(this_user_score) + parseInt(response.score));
                                if (response.level_up == 1) {
                                    var new_level = parseInt(this_user_level) +1;
                                    $("[data-usern="+ this_user +"] .user_level").empty().append(new_level);
                                    update_view(new_level);
                                }
                            //
                            update_level_progress_bar();
                        }
                } else if (response.result == 0) {
                    answer.addClass("wrong").removeAttr("disabled");
                    snd_wrong.play();
                } else if (response.result == 2) {
                    answer.addClass("almost").removeAttr("disabled");
                    snd_wrong.play();
                }
            }
        });
    return false;
});

我上传的样本在这里:http://gamoicani.es/logo/点击任何标志，我想使用键盘ENTER也提交。

//试试这个!:) 

$(document).ready(function(){
  $(this).on('keypress click','.unlocked figcaption .check',function(e){
    if((e.type === 'keypress' && e.keyCode === 13) || e.type === 'click')
    {
       // All your code inside the .on()
    }
  });
});

您可以将ajax函数设置为外部，然后在点击和按下键(enter)事件时调用它，如下所示:

$(document).on("click", ".unlocked figcaption .check", ajaxFunction);
$(document).on("keypress", "#myForm input:text", function (e) {
  if (e.keyCode == 13){
      e.preventDefault();
      ajaxFunction();
  }
});
function ajaxFunction(){
    var logo_id = $(this).parent().attr("id");
    var answer = $("#" + logo_id + " input[name=guesslogo]");
    var logo_lang = answer.attr("data-lang");
    answer.removeAttr("class").attr("disabled","true");
        //Submit answer for review
        $.ajax({
            url: "actions.php",
            get: "GET",
            data: "answerswer=" + answer.val() + "&logo_id=" + logo_id + "&logo_lang=" + logo_lang,
            cache: false,
            success: function (data){
                var response = jQuery.parseJSON(data);
                if (response.result == 1) {
                    answer.addClass("correct").siblings(".clear, .hint").fadeTo("slow","0.4");
                    answer.parent().append('<div class="alert"><h3>Correct!</h3> <p>Score: '+ response.score +'</p></div>');
                    $("#" + logo_id).siblings(".logo").removeClass("logo").addClass("answerswered").removeAttr("style");
                    snd_correct.play();
                        //update user_score and user_level values in leaderboard and header widgets
                        var this_user = $("header aside").attr("data-usern");
                        if (this_user) {
                            var this_user_score = $("header aside .user_score").text();
                            var this_user_level = $("header aside .user_level").text();
                                $("[data-usern="+ this_user +"] .user_score").empty().append(parseInt(this_user_score) + parseInt(response.score));
                                if (response.level_up == 1) {
                                    var new_level = parseInt(this_user_level) +1;
                                    $("[data-usern="+ this_user +"] .user_level").empty().append(new_level);
                                    update_view(new_level);
                                }
                            //
                            update_level_progress_bar();
                        }
                } else if (response.result == 0) {
                    answer.addClass("wrong").removeAttr("disabled");
                    snd_wrong.play();
                } else if (response.result == 2) {
                    answer.addClass("almost").removeAttr("disabled");
                    snd_wrong.play();
                }
            }
        });
    return false;
};

jsfiddle

相关文章：