jQueryブラーの問題

Question

フォームコードに問題があります。

ここではcodepenである：http://codepen.io/Dzongkha/pen/NbdadP

問題は、コードのこの部分である：

jQuery('.form-container input, .form-container textarea').each(function() { 
    var labelLeft, labelTop; 

    labelTop = jQuery(this).css('padding-top'); 
    labelLeft = jQuery(this).css('padding-left'); 

    jQuery(this).next('label').css({ 
     'top': labelTop, 
     'left': labelLeft, 
    }); 

    jQuery(this).on('focus', function() { 
     jQuery(this).next('label').attr({ 
     'style': '', 
     }); 

     var leftProperty, topProperty,inputWidth; 
     leftProperty = jQuery(this).next('label').css('left'); 
     inputWidth = jQuery(this).css('width'); 
     topProperty = jQuery(this).next('label').css('top'); 

     if(leftProperty == inputWidth) { 
     jQuery(this).next('label').css({ 
      'left': labelLeft, 
     }); 
     }; 

     if(topProperty == '0px') { 
     jQuery(this).next('label').css({ 
      'top': labelTop, 
     }); 
     }; 
    }); 

    jQuery(this).on('blur', function() { 
     if(!jQuery(this).hasClass('active')) { 
     jQuery(this).next('label').css({ 
      'top': labelTop, 
      'left': labelLeft, 
     }); 
     } 
    }); 
    }); 

だから私は集中し、ちょうどcodepenページにぼかした場合 - すべてがOKであり、そのようになっています。 proper variant。

しかし、新しいタブや別のプログラムを開いたり、コンソールで入力したり、入力やテキストエリアに集中しようとすると、ぼんやりと表示されるような問題があります。issue variantです。

私がなぜ、わからないが、この場合には、このコードの一部：

  jQuery(this).next('label').attr({ 
      'style': '', 
      }); 

は、何らかの理由で動作しません。

私はすでに試した何

：

1）

jQuery(this).next('label').css({ 
     'top': '', 
     'left': '' 
     }); 

2）

jQuery(this).next('label').removeAttr('style'); 

しかし、どちらの場合も、その問題がありました。

私の問題=を解決する方法があることを願っています（

は事前にありがとうございます！

Answer 1

あなたのコードは少し混乱で、私はあなたが簡単な何かをする多くのコードを持っていると思います。あなたが持っていますいくつかのjsコードが重複しているので、あなたのバグです

あなたはステータスを強制しているのでdevtools（コンソール）でこのバグを抱えています。そうなるとjsは変更を認識しません。パディングは変更されません。

私はまだ何かのためにそのような大きなjsのコードを持っている理由を理解していない、私はあなただけのコードをリファクタリングすることをお勧めし、問題を解決します。それ以外の場合、私はあなたを助けることができないと思う。

私の解決策は最高ではありませんが、動作するには、CSSの上と下のプロパティに!importantを追加します。あなたのコード上のjQueryを持っているところ

#example-3.form-container input:focus + label, 
#example-3.form-container input.active + label, 
#example-3.form-container textarea:focus + label, 
#example-3.form-container textarea.active + label { 
    top: 1px !important; 
    left: 1px !important; 
    padding: 20px; 
    background-color: #f04c1e; 
    color: #fff; 
} 

はまた、あなただけの$ドル記号$でそれを置き換えることができます。

http://codepen.io/sandrina-p/pen/qqRVNw