0

キーアップ機能を使用していくつかのテキスト入力を検証していますが、ボックスが検証済みと見なされたときにチェックマークのアニメーションを実行したいと思います。

問題は、入力をクリックするとすぐにアニメーションが開始されることです。クリックしてすぐに1回入力すると、アニメーションが発生するのがわかります。クラスを追加しているため、アニメーションが開始されると想定しています。クラスはkeyup、マウスを離してクリックした後にトリガーされます。それを回避する別の方法はありますか？

  1. テスト中に時間を5秒に増やしました
  2. eachとnext関数を使用しているのに、なぜ3つのアニメーションすべてがトリガーされるのですか。
  3. でアニメーションを開始する方法はありますかkeyup。

私のコードの要点は以下のとおりです。ライブバージョンはこちらをご覧ください：http：//jsfiddle.net/MhMCz/26/ 

$(':input').each(function(){
   var values = $(this).attr('value');

   $(this).keyup(function(){
      if( $(this).val() !== '' && $(this).val() !== values) {
        $(this).addClass('animated');
        $(this).next('span').html("<img src='http://png.findicons.com/files/icons/1581/silk/16/tick.png' />");
    }
    else {
       $(this).removeClass('animated'); 
       $(this).next('span').html('');     
    }                
   });

   if ( $(this).next('span').hasClass('animated') ) { }
   else {
      $(this).next('span').animate({
           marginLeft: '10px'
        }, 5000, function(){
           alert("animation complete")
   });   
}
)};
4

2 に答える 2

1

私はあなたのコードを少し再構築しました。

http://jsfiddle.net/MhMCz/30/

$('form').on('focus focusin blur focusout keyup', ':input', function(e) {
    var val = this.value,
        def = this.defaultValue,
        $t = $(this),
        $check = $t.next('span');

    switch(e.type){
        case 'focus':
        case 'focusin':
            if( val == def ) {
               this.value = '';
               $t.addClass('active');
            }
        break;
        case 'blur':
        case 'focusout':
            if(val == '') this.value = def;
            $t.removeClass('active');
        break;
        case 'keyup':
            if(val != '' && val != def) {
                $check.animate({
                    opacity: 1,
                    'margin-left': '10px'
                }, 'fast');
            } else {
               $check.animate({
                    opacity: 0,
                    'margin-left': '100px'
               }, 'fast');   
            }
        break;
    }
});

「フォーム」からのイベント委譲は、パフォーマンスのためだけのものです。 http://jsperf.com/jquery-live-vs-delegate-vs-on/4を参照してください。

于 2012-12-04T22:39:56.947 に答える
0

あなたが試すことができます：

<input type="text" id="name" value="Name" class="validate_me" valid_compare="Name" /><span></span><br />
<input type="email" id="email" value="Email" class="validate_me" valid_compare="Email" /><span></span><br />
<input type="phone" id="phone" value="Phone" class="validate_me" valid_compare="Phone" /><span></span><br />

</p> 

$(function(){
    $('.validate_me').keyup(function(){
        var this_val = $(this).val();
        var valid_compare = $(this).attr("valid_compare");

        if (this_val != "" & this_val != valid_compare ){
            $(this)
                .next()
                .css("margin-left","100px")
                .html("<img src='http://png.findicons.com/files/icons/1581/silk/16/tick.png' />")
                .animate({
                    marginLeft: '10px'
                }, 1000, function(){
            });   
        } else {
            $(this).next().html("");
        }
    });
});​

keyup() を使用した実際の例を次に示します: http://jsfiddle.net/9gg3n/4/

そのため、検証のために比較する入力フィールドの wach にカスタム属性を追加しました (例: != 名前、!= メールなど...)。ユーザーがタイプを移動すると (keyup())、それが有効かどうかがチェックされ、有効な場合はティックがアニメーション化されます。

于 2012-12-04T22:14:57.267 に答える