如何以contact7形式定位类并将其添加到textarea？

Question

I am currently working on styling a contact7 form and have run into a slight issue because the jquery snippet I am using(I am a javascript/jquery newbie) only affects inputs and not text areas. For some reason contact7's text section calls an input yet the textarea doesn't, it only uses textarea. Both input and textarea are automatically generated by cf7.

Right now my text and email fields are working as expected and am trying to figure out how to add and remove classes to the textarea. As mentioned I am a newbie so any guidance would be appreciated.

<script>
    jQuery(function($) {
        $('input').focus(function(){
            $(this).parents('.form-label-outer').addClass('focused');
        });

        $('input').blur(function(){
            var inputValue = $(this).val();
            if ( inputValue == "" ) {
                $(this).removeClass('filled');
                $(this).parents('.form-label-outer').removeClass('focused');  
            } else {
                $(this).addClass('filled');
            }
        })
    });
</script>

<form action="/contact/?preview_id=8&amp;preview_nonce=1ac0cc6b7e&amp;_thumbnail_id=-1&amp;preview=true#wpcf7-f28580-p8-o4" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="28580">
<input type="hidden" name="_wpcf7_version" value="5.1.1">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f28580-p8-o4">
<input type="hidden" name="_wpcf7_container_post" value="8">
<input type="hidden" name="g-recaptcha-response" value="">
</div>
<div class="form-group">
      <label class="form-label-outer"><span class="form-label">What is your name?</span> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label> /* Event triggered on input (input automatically generated by cf7) */
    </div>
<div class="form-group">
      <label class="form-label-outer"><span class="form-label">What is your email?</span><span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span></label> /* Event triggered on input (input automatically generated by cf7) */
    </div>
<div class="form-group">
      <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> /* Need to trigger event on textarea (textarea automatically generated by cf7) */
    </div>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

What I would like to achive is to add and subtract the above mentioned classes to the textarea also.

Answer 1

您要查找的选择器是$('input, textarea') 。

Answer 2

I think you wanted to apply the same thing to the text area as well ie on focus you need to remove form-label-outer class and add focused class similarly you need to do some action on blur as well. I would suggest you keep a common class for both input and text area and pass that class in the above function.

or

You can create an id for the text area alone and you can pass that id to the function.

Make sure you have form-label-outer class to the parent of the input or text area otherwise it will not work.