우커머스 체크아웃에서 '라벨 띄우기'를 할 수 있는 방법이 있습니까?(Shopify처럼)

우커머스 체크아웃에서 '라벨 띄우기'를 할 수 있는 방법이 있습니까?(Shopify처럼)

다음과 같이 사용자가 특정 입력에 초점을 맞출 때 레이블을 애니메이션화하여 WooCommerce 체크아웃 페이지의 Shopify 체크아웃에서 얻은 경험을 복제하려고 합니다.

input:focus ~ label을 사용해 보았지만 기본 WooCommerce 입력이 다음과 같은 스팬(.wocommerce-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>

감사합니다!

이 코드들이 유용하게 쓰이길 바랍니다.

내 css:

라벨 {}

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

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

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

mujQuery:

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');

})

우커머스 체크아웃 입력의 가장 큰 문제는 입력 전에 라벨이 있다는 것입니다.부동 레이블이 작동하려면 입력 뒤에 레이블을 배치해야 합니다. 그러면 모든 것이 쉽습니다. (여기서 CSS 방법을 사용할 수 있습니다: https://css-tricks.com/float-labels-css/) .

html에서 이 요소들을 되돌리는 방법을 찾으려고 했지만 성공하지 못했습니다.저도 css에서 column-reverse와 함께 flexbox를 사용해 보았지만 애니메이션이 작동하지 않는 것 같습니다.

기본적으로 우리가 찾고 있는 답은 다음과 같은 질문에 대한 것입니다.우커머스 체크아웃에서 입력 후 라벨을 배치하는 방법?

@Morteza Barati의 대답이 좋을 수도 있지만 제대로 되지 않습니다.입력이 자동으로 채워진 경우 레이블이 맨 위에 위치합니다. + 필드가 지워지면 레이블이 위로 이동하면 다시 내려오지 않습니다.

이미 언급한 바와 같이:텍스트 입력 시 입력 레이블 위치를 변경할 수 있는 표준화된 방법이 없습니다.

주제 외:스크린샷의 디자인 패턴은 Google 재료 디자인(최소한 오늘날 일반적으로 사용되고 있는 부분)에서 비롯됩니다.이 패턴에 대한 자세한 내용은 https://material.io/components/text-fields 에서 확인할 수 있습니다.

JS 및 CSS를 통한 솔루션

그 디자인 패턴을 구현하려면 CSS와 JS 코드가 필요합니다.적용해야 하는 상태는 네 가지입니다.

1. 필드가 텍스트 포커스를 수신할 때:라벨을 위로 이동합니다.
2. 필드가 초점을 잃고 내용이 없는 경우: 레이블을 아래로 이동합니다.
3. 필드가 초점을 잃고 내용이 있는 경우: 레이블을 위로 유지합니다.
4. 필드에 페이지 로드 값이 있을 경우:라벨을 위로 이동합니다.

여기 짧은 데모가 있습니다. 중요한 부분은 의 필드 컨테이너에 CSS 클래스를 추가하는 JS 코드입니다.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 솔루션은 당신이 필드를 쫓아올 때 가능하며 아래 샘플처럼 보일 수 있습니다.입력 필드 "placeholder"를 초기 캡션으로 사용하여 작동합니다.CSS 셀렉터:not(:placeholder-shown)값이 있는 모든 텍스트 필드와 일치합니다. CSSr: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>

언급URL : https://stackoverflow.com/questions/54360208/is-there-a-way-to-float-the-labels-on-the-woocommerce-checkout-like-shopify