Move / Animate placeholder on input focus

user_14497172 0
Viewed 589

I am looking for assistance with the JS to animate the placeholder to move above the input box on selection. I have trialled various pieces of coding and this seems to be the closest to achieve the result.

I have tried to apply the following JS Script but it seems to be throwing an error. It may be an error with the jquery.

If you can provide any help it would be much appreciated.

$('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');
  }
})

Here is the HTML and the CSS I have applied. 

.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>

Thanks very much!

woocommerce wordpress css jquery javascript
1 Answers

I didn't waste my time fixing your bad indentation practices, but here's a quick and dirty solution:

$(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 --->

user_24384230
Related