강제 입력

Question

나는 현재 워드 프레스를 통해 문의 양식 플러그인 등 출력 된 HTML 함께 일하고 있어요 및 다음과 같이 JS 보이는

형제 자매를 중심으로 어떤 경우에도 사용자가 레이블을 클릭 할 때마다 해당 입력에 초점을 맞추는 방법을 알아 내려고 노력하고 있습니다. 지금이 순간이 바로 그 곳입니다. 누구나 의견이나 제안이 있으면 크게 감사하겠습니다.

Answer 1

는 <label>에 for 속성은 id하지name을 찾습니다. 당신이 정말로 자바 스크립트/JQuery와 함께이 작업을 수행하지하려면 $(this).next().children().focus();

를 사용하여 당신이 이런 식으로 할 수있는 라벨을 사용하여 아래로 묶여 있지만 예는 다음과 자바 스크립트

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

처럼 사용할 수 있습니다