Question

这是我的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>

当输入成为焦点时，我在编写jQuery片段以删除/隐藏:: after伪元素时遇到问题。特别是遍历和输出DOM。

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

这是关于我的JS知识的程度。我知道我需要从选择输入开始，并通过在伪元素上应用隐藏来结束。我只是不知道如何写这个功能。

Answer 1

我建议在输入焦点上，只需在.testimonial-form__company-name div元素中添加一个类。当发生这种情况时，您只需添加一个CSS类来隐藏:: after伪装元素。

退房：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>

如何使用jQuery删除焦点上的输入占位符文本？

1 个答案: