Question

我有一个用于ajax的PHP登录表单，当我点击登录按钮时它非常好用，但是没有按下回车键。

我做了很多关于它的研究并尝试了本网站上发布的所有解决方案，并尝试了所有的解决方案，但没有任何对我有用。

我的HTML包含在div id =“mini-login”

中

<div class="content-login">
<h4>Email Address:</h4>
<input type="text" name="email" value="" />
<h4>Password:</h4>
<input type="password" name="password" value="" id="pasword"/>
<br />
<a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a><br />
<br />
 <input type="button" value="<?php echo $button_login; ?>" id="button-login-mini" class="button" />

我的剧本 -

$('#button-login-mini').live('click', function() {
$.ajax({
url: 'index.php?route=module/login/validate',
type: 'post',
data: $('#mini-login .content-login :input'),
dataType: 'json',
beforeSend: function() {
  $('#button-login-mini').attr('disabled', true);
  $('#button-login-mini').after('<span class="wait">Please wait</span>');
},  
complete: function() {
  $('#button-login-mini').attr('disabled', false);
  $('.wait').remove();
},        
success: function(json) {
  $('.warning, .error').remove();
  if (json['redirect']) {
    $('#mini-login .content-login').fadeOut('slow');
    location = json['redirect'];
  } else if (json['error']) {
    $('#mini-login .content-login').prepend('<div class="warning" style="display: none;">' + json['error']['warning'] + '</div>');

    $('.warning').fadeIn('slow');
  }
},
error: function(xhr, ajaxOptions, thrownError) {
  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
}); 
});

所以上面的工作非常好，但我试着在输入密钥上使用key-keyup，keydown，keypress和检查keyCode == 13来调用它，但它没有用，尝试使用表格，现在疯了过了!!!我究竟做错了什么？？以及如何使它工作？

注意：登录页面不是整个文档，只需单击主页上的登录链接即可向下滑动。

这是登录页面的调用方式 -

$(document).ready(function() {
$('#mini-login > .heading-login a').live('click', function() {
    $('#mini-login').addClass('active');

    $('#mini-login').load('index.php?route=module/login #mini-login > *');

    $('#mini-login').live('mouseleave', function() {
        $(this).removeClass('active');
    });
});
});

Answer 1

这是我使用jQuery的代码片段

            $(".login").keyup(function(event){
                if(event.keyCode == 13){
                    $("#loginBtn").click();
                }
            });

keyCode 13 =输入密钥#loginBtn是我附加到按钮本身的ID，它调用onClick，而.login只是它所持有的div类。

希望这会有所帮助

Answer 2

按下输入后，使用trigger触发点击事件....

试试这个

  $(document).keypress(function(event){  // i called a clicked event in document here you can chnage it to any other event like.. input field keyup event or so....
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13'){
     $('#button-login-mini').trigger('click');   
   }

});

并使用on()代替实时

$(document).on('click', '#button-login-mini',function() {....

最接近的静态父级优先于...中的文档....在您的情况下是#content-login我认为

Answer 3

试试这个

 $(document).ready(function() {
$('#mini-login > .heading-login a').live('click', function() {

 $(document).bind('keydown', function(e){         
    if (e.which == 13){
       $('#button-login-mini').trigger('click');   
   }     
      });


$('#mini-login').addClass('active');

$('#mini-login').load('index.php?route=module/login #mini-login > *');

$('#mini-login').live('mouseleave', function() {
    $(this).removeClass('active');
    $(document).unbind('keydown');
});
});
});

Answer 4

当您在电子邮件文本框或密码文本框中按Enter键时，您实际上可以调用该事件：

将ajax代码放在函数上并在事件上调用它：

function login(){
    $.ajax({
    url: 'index.php?route=module/login/validate',
    type: 'post',
    data: $('#mini-login .content-login :input'),
    dataType: 'json',
    beforeSend: function() {
      $('#button-login-mini').attr('disabled', true);
      $('#button-login-mini').after('<span class="wait">Please wait</span>');
    },  
    complete: function() {
      $('#button-login-mini').attr('disabled', false);
      $('.wait').remove();
    },        
    success: function(json) {
      $('.warning, .error').remove();
      if (json['redirect']) {
        $('#mini-login .content-login').fadeOut('slow');
        location = json['redirect'];
      } else if (json['error']) {
        $('#mini-login .content-login').prepend('<div class="warning" style="display: none;">' + json['error']['warning'] + '</div>');

        $('.warning').fadeIn('slow');
      }
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
    }); 
}

$document.ready(function(){
$('#button-login-mini').on('click', function() {
  login();
});
$('input[name="email"],input[name="password"]').bind('keypress',function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) {
      login();
    }
  });
});

Ajax登录没有输入密钥

4 个答案: