Как мне настроить таргетинг и добавить класс к текстовой области в форме контакта 7?

Question

В настоящее время я работаю над стилизацией формы contact7 и столкнулся с небольшой проблемой, потому что используемый мной фрагмент jquery (я новичок в javascript / jquery) влияет только на ввод, а не на текстовые области.По какой-то причине текстовая секция contact7 вызывает ввод, а textarea - нет, она использует только textarea.Как input, так и textarea автоматически генерируются cf7.

Сейчас мои поля для текста и электронной почты работают как положено, и я пытаюсь выяснить, как добавлять и удалять классы в текстовой области.Как уже упоминалось, я новичок, поэтому любые рекомендации будут оценены.

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

Я бы хотел добавить и вычесть вышеупомянутые классы в текстовую область.

Answer 1

Я думаю, что вы хотите применить то же самое к текстовой области, то есть к фокусу, который вам нужно удалить form-label-outer класс и добавить сосредоточенный класс аналогично, как вам нужно чтобы сделать некоторые действия на размытие, а также. Я бы посоветовал вам сохранить общий класс как для ввода, так и для текстовой области и передать этот класс в вышеуказанной функции.

или

Вы можете создать идентификатор только для текстовой области и передать этот идентификатор функции.

Убедитесь, что у вас есть form-label-external класс к родительскому элементу области ввода или текста, иначе он не будет работать.

Answer 2

Селектор, который вы ищете, $('input, textarea').