3

PHPでajaxで動作するログインフォームがあります。ログインボタンをクリックすると非常にうまく機能しますが、Enterキーを押しても動作しません。

私はそれについて多くの調査を行い、同じことに関してこのサイトに投稿されたすべての解決策を試し、すべての解決策を試しましたが、何もうまくいきません。

私のHTMLはdivid="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);
}
}); 
});

したがって、上記は非常にうまく機能していますが、keyup、keydown、keypressを使用して、keyCode == 13をチェックして、Enterキーで呼び出しようとしましたが、機能しませんでした。フォームも使用してみました。 !! 私は何が間違っているのですか？そしてそれを機能させる方法は??

注：ログインページはドキュメント全体ではなく、ホームページのログインリンクをクリックすると下にスライドします。

これがログインページの呼び方です-

$(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');
    });
});
});
4

4 に答える 4

2

これを試して

 $(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');
});
});
});
于 2013-03-25T05:41:58.153 に答える
1

これが私がjQueryで使用するコードスニペットです

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

keyCode 13 =エンターキー#loginBtnは、onClickを呼び出すボタン自体に付けられたIDであり.login、保持されているdivクラスです。

お役に立てれば

于 2013-03-25T05:38:06.520 に答える
1

triggerEnterキーを押したときにクリックイベントをトリガーするために使用します。

これを試して

  $(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私が思う

于 2013-03-25T05:40:14.710 に答える
0

メールテキストボックスまたはパスワードテキストボックスで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();
    }
  });
});
于 2013-03-25T06:07:37.143 に答える