预定义值时浮动标签不起作用答案

【问题标题】：Float labels doesn't work when a value is pre-defined预定义值时浮动标签不起作用
【发布时间】：2018-09-04 13:07:48
【问题描述】：

我在使用一些 jQuery 时遇到了一些问题，我正在使用浮动标签。它工作正常，但不是在页面加载时预定义一个值时，通常在 WooCommerce 中，如果用户在系统中输入了姓名和地址，它就不起作用。

是否可以修改代码，检查任何值，而不仅仅是检查是否正在输入值？

$(document).ready(function() {
  var $input = $('.woocommerce form .form-row input.input-text');

  $input.focusout(function() {
    if ($(this).val()) {
      $(this).addClass('input-focus');
      $(this).next('.woocommerce form .form-row label').addClass('input-focus-label');
    } else {
      $(this).removeClass('input-focus');
      $(this).next('.woocommerce form .form-row label').removeClass('input-focus-label');

    }
  });
});

.input-focus-label {
  transform: translateY(-38px);
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  color: #00bafa;
  font-size: 18px;
}

.input-focus {
  border-color: #00bafa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
  <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="Name" autocomplete="given-name">
  <label for="billing_first_name" class="">Name <abbr class="required">*</abbr>
    </label>
</p>

【问题讨论】：

请也分享您的 HTML 代码。
抱歉，更新了！
HTML 中没有表单元素。没有任何与.woocommerce form .form-row input.input-text相关的类和元素

标签： jquery css wordpress woocommerce

【解决方案1】：

假设您使用$('.woocommerce form .form-row input.input-text'); 选择器获取$input 变量中的元素，您应该循环遍历元素并检查值是否存在以将相应的类添加到其中。 focusout() 事件只是注册，如果您没有关注输入，则不会调用。这就是如果已经存在值则不会执行的原因。

如果值已经存在，则在$input 选择后添加以下循环以将类添加到标签。

$input.each(function(i, el) {
    if ($(el).val()) {
      $(el).addClass('input-focus');
      $(el).next('.woocommerce form .form-row label').addClass('input-focus-label');
    }
  });

检查下面的 sn-p 我根据选择创建了 HTML 并添加了循环。不清楚这是否是你需要的

$(document).ready(function() {
  var $input = $('.woocommerce form .form-row input.input-text');
  $input.each(function(i, el) {
    if ($(el).val()) {
      $(el).addClass('input-focus');
      $(el).next('.woocommerce form .form-row label').addClass('input-focus-label');
    }
  });
  $input.focusout(function() {
    if ($(this).val()) {
      $(this).addClass('input-focus');
      $(this).next('.woocommerce form .form-row label').addClass('input-focus-label');
    } else {
      $(this).removeClass('input-focus');
      $(this).next('.woocommerce form .form-row label').removeClass('input-focus-label');

    }
  });
});

.input-focus-label {
  transform: translateY(-38px);
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  color: #00bafa;
  font-size: 18px;
}

.input-focus {
  border-color: #00bafa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='woocommerce'>
  <form>
    <div class='form-row'>
      <input type='text' class='input-text' value='aaa'>
      <label>Value Present</label>
    </div>
    <div class='form-row'>
      <input type='text' class='input-text'>
      <label>No Value</label>
    </div>
  </form>
</div>

【讨论】：