javascript - 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 页面上进行聚焦和模糊 - 一切都很好，看起来像这样: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 代码，这就是您的错误的原因。

您在开发工具(控制台)中遇到了该错误，因为您正在强制状态，并且当发生这种情况时，js 无法识别修改，这就是样式填充不改变的原因。

我还是不明白为什么你有这么大的js代码来做简单的事情，我建议你只用css重构代码，它可以解决问题。否则我想我帮不了你。

我的解决方案不是最好的，但它可以通过在 css 上添加 !important 到 top 和 left 属性来实现。

#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