jQuery blur issue

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 странице - все нормально, и выглядит следующим образом: 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 (console), потому что вы форсируете статус, и когда это происходит, js не распознает модификацию, поэтому стиль заполнение не изменяется.

Я до сих пор не понимаю, почему у вас такой большой код js для чего-то простого, я рекомендую реорганизовать код только с помощью css, и он решает проблему. В противном случае, я думаю, я не могу вам помочь.

Мое решение не самое лучшее, но оно работает, добавив !important в верхние и левые свойства на css.

#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; 
} 

Кроме того, где у вас есть JQuery на вашем коде, вы можете заменить его только знак $ доллар $.

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