フォース私は現在のWordpressを通じて問い合わせフォームプラグインで働いている入力

Question

を兄弟に焦点を当てので、出力されたHTMLとJSは、次のようになります。

$('.form .form--field label').click(function() { 
 
    $(this).parents('.form--field').addClass('form--field--focus'); 
 
    $('input').filter(':first').focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form--field form--field__firstname"> 
 
    <label for="firstname" class="form--field__label">First Name</label> 
 
    <span> 
 
    <input type="text" name="firstname"> 
 
    </span> 
 
</div>

デザインは私を起こしていますどんな場合でも、ユーザーがラベルをクリックするたびに、それぞれの入力にどのようにフォーカスを当てるかを考えようとしています。現時点では、これは私がそこにいるところです。誰かが何か入力や提案があれば、それは非常に感謝します。 <label>上

Answer 1

for属性がidないnameを探します。あなたが本当にのJavaScript/jQueryを使ってこれを行うにはしたくない場合は、$(this).next().children().focus();

を使用して、このようにそれを行うことができますラベルを使用してに縛られますが、以下の実施例では、JavaScript

<div class="form--field form--field__firstname"> 
 
    <label for="firstname" class="form--field__label">First Name</label> 
 
    <span> 
 
    <input type="text" id="firstname" name="firstname"> 
 
    </span> 
 
</div>

せずに動作するはずです

$('.form--field__label').click(function() { 
 
    $(this).next().children().focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form--field form--field__firstname"> 
 
    <label class="form--field__label">First Name</label> 
 
    <span> 
 
    <input type="text"> 
 
    </span> 
 
</div> 
 

 
<div class="form--field form--field__secondname"> 
 
    <!-- using a span instead of label as an example !--> 
 
    <span class="form--field__label">Second Name</span> 
 
    <span> 
 
    <input type="text"> 
 
    </span> 
 
</div>

Answer 2

セット入力I d = "firstname"はラベルのクリックに集中するためです。これはhtmlの組み込み機能です。あなたはまだあなたがこの

$('.form--field label').click(function() { 
 

 
    //It will look next sibling which is span and then find input in it and then focus it 
 
    //so it doesn't focus on other children elements 
 
    $(this).next('span').find('input').focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form--field form--field__firstname"> 
 
    <label class="form--field__label">First Name</label> 
 
    <span> 
 
    <input type="text" name="firstname"> 
 
    </span> 
 
    <br> 
 
    <label class="form--field__label">Last Name</label> 
 
    <span> 
 
    <input type="text" name="lastname"> 
 
    </span> 
 
</div>

のようにそれを使用することができます解決しない場合は、ここで https://www.w3schools.com/tags/tag_label.asp

複数の入力のための

<input type="text" id="firstname" name="firstname"> 

詳細あなたはこの

<form action="/action_page.php"> 
    <label for="male">Male</label> 
    <input type="radio" name="gender" id="male" value="male"><br> 
    <label for="female">Female</label> 
    <input type="radio" name="gender" id="female" value="female"><br> 
    <label for="other">Other</label> 
    <input type="radio" name="gender" id="other" value="other"><br><br> 
    <input type="submit" value="Submit"> 
</form> 

のようにそれを使用することができます