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代码，这就是你的bug。

你正在使用devtools（控制台）的那个错误，因为你正在强制一个状态，当发生这种情况时，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，则只能使用$ dollar符号$替换它。

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

jQuery模糊问题

1 个答案: