在输入焦点上移动/动画占位符

Question

我正在寻求 JS 的帮助，以使占位符在选择时移动到输入框上方。我已经尝试了各种编码，这似乎是最接近结果的。

我已尝试应用以下 JS 脚本，但似乎抛出了错误。可能是 jquery 的错误。

如果您能提供任何帮助，将不胜感激。

$('input').focus(function(){
  $(this).parents('.billing_first_name_field').addClass('focused');
});

$('input').blur(function(){
  var inputValue = $(this).val();
  if ( inputValue == "" ) {
    $(this).parents('.billing_first_name_field').removeClass('focused');  
  } else {
    $(this).addClass('filled');
  }
})  

这是我应用的 HTML 和 CSS。

.formRow {
    position: relative;
    width: 100%;
}

.formRow--item {
    display: block;
    width: 100%;
}

.input-text {
    position: relative;
    padding: 15px 20px 11px;
    width: 100%;
    outline: none;
    border: solid 1px rgb(149, 152, 154);
    border-radius: 4px;
    color: rgb(44, 50, 53);
    letter-spacing: .2px;
    font-weight: 400;
    font-size: 16px;
    resize: none;
    transition: all .2s ease;
} 
.screen-reader-text {
    position: relative;
    display: block;
    width: 100%;
}
.screen-reader-text.active {
 .placeholder {
    top: -5px;
    background-color: #ffffff;
    color: #fd999a;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 11px;
    line-height: 14px;
    transform: translateY(0);
  }           
}
.screen-reader-text:not(:focus):not(:hover) {
 & ~ .placeholder {
    color: #fec8c9;
 }
}
.input-text {
 &:focus,
 &:hover {
    border-color: red;
 }
}

.placeholder {
    position: absolute;
    top: 50%;
    left: 10px;
    display: block;
    padding: 0 10px;
    color: rgb(149, 152, 154);
    white-space: nowrap;
    letter-spacing: .2px;
    font-weight: normal;
    font-size: 16px;
    transition: all, .2s;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

<div class="woocommerce-billing-fields__field-wrapper">
            <p class="form-row form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
                <label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
                </label>
               
                    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
        </span>
        </p>
    

非常感谢！

Answer 1

我没有浪费时间修复您的不良缩进做法，但这里有一个快速而肮脏的解决方案：

$(function(){ // load
const inputText = $('.input-text');
inputText.focus(function(){
  const t = $(this);
  if(t.val() === ''){
    t.addClass('fade_white');
    setTimeout(()=>{
      t.attr('placeholder', ''); t.removeClass('fade_white');
    }, 270);
  }
  else{
    t.attr('placeholder', '');
   }
});
inputText.blur(function(){
  $(this).attr('placeholder', 'First name');
});
});// end load

.formRow {
    position: relative;
    width: 100%;
}

.formRow--item {
    display: block;
    width: 100%;
}

.input-text {
    position: relative;
    padding: 15px 20px 11px;
    width: 100%;
    outline: none;
    border: solid 1px rgb(149, 152, 154);
    border-radius: 4px;
    color: rgb(44, 50, 53);
    letter-spacing: .2px;
    font-weight: 400;
    font-size: 16px;
    resize: none;
    transition: all .2s ease;
} 
.screen-reader-text {
    position: relative;
    display: block;
    width: 100%;
}
.screen-reader-text.active {
 .placeholder {
    top: -5px;
    background-color: #ffffff;
    color: #fd999a;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 11px;
    line-height: 14px;
    transform: translateY(0);
  }           
}
.screen-reader-text:not(:focus):not(:hover) {
 & ~ .placeholder {
    color: #fec8c9;
 }
}
.input-text {
 &:focus,
 &:hover {
    border-color: red;
 }
}

.placeholder {
    position: absolute;
    top: 50%;
    left: 10px;
    display: block;
    padding: 0 10px;
    color: rgb(149, 152, 154);
    white-space: nowrap;
    letter-spacing: .2px;
    font-weight: normal;
    font-size: 16px;
    transition: all, .2s;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}
/* not my CSS above here - fix yours */
.input-text{
  transition:color 0.25s ease-in-out; color:#000;
}
.input-text.fade_white{
  color:#fff;
}

<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 form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
                <label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
                </label>
               
                    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
        </span>
        </p>
<!-- not my HTML - fix yours --->