有没有办法在 woocommerce 结账时“浮动标签”？ （如 Shopify）

Question

我正在尝试在我的 WooCommerce 结帐页面中复制 Shopify 结帐的体验，方法是在用户关注某个输入时为标签设置动画，如下所示：

我尝试过使用 input:focus ~ label，但它不起作用，因为默认的 WooCommerce 输入位于跨度 (.woocommerce-input-wrapper) 内，如下所示：

<!-- The basic markup for each input -->
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
    <label for="billing_first_name" class="">Nombre&nbsp;<abbr class="required" title="obligatorio">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
    </span>
</p>

<!-- CSS -->
<style>
.woocommerce-billing-fields__field-wrapper .form-row{
    position: relative;
}
.woocommerce-billing-fields__field-wrapper .form-row label{
    position: absolute;
    top: 11px;
    left: 11px;
    padding: 0;
    color: #808080;
    transition: .35s;
}
.woocommerce-billing-fields__field-wrapper .form-row input:focus ~ label{
    top: -8px;
    font-size: 12px;
    font-weight: 500;
}
</style>

谢谢！

Answer 1

希望这些代码对您有用

我的CSS：

标签{}

.woocommerce form .form-row label {
    position: absolute;
    left: 10px;
    top: 15px;
}

.woocommerce form .form-row {
    position: relative;
}

label.floatlabel {
    top: -30px !important;
}

mu jQuery :

jQuery('.woocommerce form .form-row input').click(function(){

var label = jQuery("label[for='" + jQuery(this).attr('id') + "']");

if(jQuery('floatlabel').length ){

jQuery('label.floatlabel').removeClass('floatlabel');

}

jQuery(label).addClass('floatlabel');

})

Answer 2

woocommerce结帐输入的主要问题是标签在输入之前。要使浮动标签起作用，您需要将标签放在输入之后，然后一切都很容易. （您可以在此处使用任何 css 方法：https://css-tricks.com/float-labels-css/）。

我尝试找到一种方法来还原 html 中的这些元素，但没有成功。我还尝试在 css 中使用 flexbox 和 column-reverse，但动画似乎不起作用。

基本上我们正在寻找的答案是针对以下问题：如何在 woocommerce 结帐输入后放置标签？

@Morteza Barati 的回答可能很好，但不能正常工作。如果输入是自动填充的，则标签位于它们之上+一旦标签向上移动以防字段被擦除，它就不会再向下移动。

Answer 3

如前所述：没有标准化的方法来更改文本输入中的输入标签位置。

题外话：您的屏幕截图中的设计模式来自 Google 的材料设计（至少在今天它是常用和可见的）。您可以在此处找到有关该模式的更多信息：https://material.io/components/text-fields

用 JS 和 CSS 解决

您需要一些 CSS 和 JS 代码来实现该设计模式。您需要覆盖四种不同的状态：

1. 当字段接收到文本焦点时：向上移动标签。
2. 当字段失去焦点且没有内容时：将标签向下移动。
3. 当字段失去焦点并有内容时：保持标签向上。
4. 当一个字段在页面加载时有值：向上移动标签。

这是一个简短的演示 - 重要的部分是 JS 代码，它将 CSS 类添加到 focus、blur 和 input 上的字段容器。

jQuery('.form-row :input').each(function() {
  var $input = jQuery(this);
  var $row   = $input.closest('.form-row');
  
  // Is the field filled on page load?
  if ($input.val()) {
    $row.addClass('-filled');
  }
  
  // Enter or leave the "focus" state.
  $input.on('focus', function() {
    $row.addClass('-focus');
  });
  $input.on('blur', function() {
    $row.removeClass('-focus');
  });

  // When the fields input value changes, add or remove the "-filled" state
  $input.on('input', function() {
    if ($input.val()) {
      $row.addClass('-filled');
    } else {
      $row.removeClass('-filled');
    }
  });
})

.form-row {
  position: relative;
  padding-top: 20px; /* top padding adds space for the label */
  margin: 10px 0;
}

.form-row label {
  position: absolute;
  top: 20px; /* initially, the label is down */
  left: 0;
  color: #aaa;
  transition: all 0.3s;
}

/* Give both the label and input field the same padding/box-size */
.form-row input, 
.form-row label {
  font-size: 16px;
  line-height: 22px;
  padding: 8px 12px;
  margin: 0;
}

/* When the field is focused or filled, move the label up */
.form-row.-focus label,
.form-row.-filled label {
  color: #6200ee;
  font-size: 12px;
  top: 0;
  padding: 0;
  line-height: 20px; /* Set the line height to the top-padding */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="woocommerce-billing-fields__field-wrapper">

<p class="form-row">
    <label for="field1">
        Field 1&nbsp;<abbr class="required">*</abbr>
    </label>
    <span class="woocommerce-input-wrapper">
        <input type="text" id="field1">
    </span>
</p>

<p class="form-row">
    <label for="field2">
        FIeld 2&nbsp;<abbr class="required">*</abbr>
    </label>
    <span class="woocommerce-input-wrapper">
        <input type="text" id="field2" value="Initial Value">
    </span>
</p>

</div>

纯 CSS

TL;DR;这在开箱即用的 WooCommerce 中是不可能的。

注意：纯 CSS 解决方案也是可能的当你在字段之后，可能看起来像下面的示例。 它通过使用输入字段“占位符”作为初始标题来工作。 CSS 选择器:not(:placeholder-shown) 匹配每个具有值的文本字段。 CSS 选择器:focus 处理输入字段的焦点状态。

但是，这只是一个示例，如果不编写自定义购物车和结帐模板以生成正确的 HTML 元素，则在 WooCommerce 中是不可能的。

.form-row {
  position: relative;
  padding-top: 20px;
  margin: 10px 0;
}

.form-row label {
  position: absolute;
  color: #6200ee;
  font-size: 12px;
  top: 0;
  left: 0;
  padding: 0;
  line-height: 20px;
  opacity: 0;
  transition: all 0.3s;
}

.form-row input {
  font-size: 16px;
  line-height: 22px;
  padding: 8px 12px;
  margin: 0;
}

/* Here's the logic: */

.form-row input:focus::placeholder {
  opacity: 0;
}

.form-row input:focus + label,
.form-row input:not(:placeholder-shown) + label {
  opacity: 1;
}

 <p class="form-row">
    <input type="text" id="field1" placeholder="My Field">
    <label for="field1">
        My Field
    </label>
</p>