CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cstauf2
cstauf2

Reputation: 23

How do I remove input placeholder text on focus with jQuery?

This is my HTML:

<div class="testimonial-form__field testimonial-form__company-name">
    <span class="wpcf7-form-control-wrap company-name">
        <input type="text" name="company-name">
    </span>
    ::after
</div>

I'm having trouble writing a jQuery snippet to remove/hide the ::after pseudo element when the input comes in focus. Specifically traversing the DOM up and out of the input.

$('.testimonial-form__field input').css( "display", "none" );

That is about the extent of my JS knowledge. I know I need to start by selecting the input and end by applying a hide on the pseudo element. I just don't know how to write that function.

Upvotes: 2

Views: 589

Answers (1)

Nick George
Nick George

Reputation: 326

I suggest on input focus you simply add a class to the .testimonial-form__company-name div element. When that happens, you just add a CSS class to hide the ::after psuedo element.

Check out: http://jsfiddle.net/c5a19byk/

<style>
  .testimonial-form__company-name::after {
    content: "not focused";
    display: block;
  }
  .testimonial-form__company-name.active::after {
    display: none;
  }
</style>

<div class="testimonial-form__field testimonial-form__company-name">
  <span class="wpcf7-form-control-wrap company-name">
     Input: <input type="text" name="company-name">
   </span>
</div>

<script>
  $('.testimonial-form__company-name input').focus(function () {
    $(this).closest('.testimonial-form__company-name').addClass('active');
  }).blur(function () {
    $(this).closest('.testimonial-form__company-name').removeClass('active');
  });
</script>

Upvotes: 1

Related Questions