如何獲得所有文本框的焦點？ 使用 javascript 事件而不使用 jquery

Question

大家好，我需要一點幫助。 任何人都可以幫助我，如何在我的情況下使用這個關鍵字？

<form>
    <div class="form-group">
        <label for="txtFirstName">Your name</label>
        <input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
    </div>              
    <div class="form-group">
        <label for="txtEmail">Email address</label>
        <input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
    </div>
    <div class="form-group">                            
        <select id="drpPosition" name="drpPosition">
            <option>I would describe my user type as </option>
            <option>Web developer </option>
            <option>Web designer </option>
        </select>
    </div>
    <div class="form-group">
        <label for="txtPassword">Password</label>
        <input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
        <small>Minimum 8 characters</small>
    </div>       
    <div class="form-group">
        <input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
    </div>
</form>

這是我的 JavaScript 代碼：

var inputFirstName = document.querySelector('.inputBox');
console.log(inputFirstName);
this.addEventListener('focusin', inputAddClassFunc);
this.addEventListener('focusout', inputRemoveClassFunc);

function inputAddClassFunc(event){ 
    console.log(this);     
    this.previousElementSibling.classList.add('active');    
}
function inputRemoveClassFunc(event){    
    var hasValue = this.value;    
    if(!hasValue) {
        this.previousElementSibling.classList.remove('active');
    }    
}

當我聚焦到文本框時，活動類將被添加到它的兄弟標簽中，在我的情況下，它僅適用於第一個文本框，而不適用於所有文本框。 如何使用“this”適用於所有文本框？

Answer 1

我會改用事件委托 - 向focusin添加focusin和focusout偵聽器，當事件觸發時，如果事件的目標是.inputBox es 之一，則執行更改event.target.previousElementSibling類的邏輯event.target.previousElementSibling ：

 const form = document.querySelector('form'); form.addEventListener('focusin', inputAddClassFunc); form.addEventListener('focusout', inputRemoveClassFunc); function inputAddClassFunc(event) { if (event.target.matches('.inputBox')) { event.target.previousElementSibling.classList.add('active'); } } function inputRemoveClassFunc(event) { if (event.target.matches('.inputBox')) { var hasValue = event.target.value; if (!hasValue) { event.target.previousElementSibling.classList.remove('active'); } } }

 .active { background-color: yellow; }

 <form> <div class="form-group"> <label for="txtFirstName">Your name</label> <input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" /> </div> <div class="form-group"> <label for="txtEmail">Email address</label> <input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" /> </div> <div class="form-group"> <select id="drpPosition" name="drpPosition"> <option>I would describe my user type as </option> <option>Web developer </option> <option>Web designer </option> </select> </div> <div class="form-group"> <label for="txtPassword">Password</label> <input id="txtPassword" type="password" autocomplete="off" class="inputBox" /> <small>Minimum 8 characters</small> </div> <div class="form-group"> <input type="submit" name="btnSubmit" id="btnSubmit" value="Next" /> </div> </form>

另請注意，如果您希望txtPassword元素具有inputBox類，則應更改

<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />

到

<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />

（去除重復的cool屬性）