如何获得所有文本框的焦点？使用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和focusout侦听器，并在事件触发时，如果事件的目标是.inputBox中的一个，则执行更改逻辑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" />

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

（删除重复的cool属性）

Answer 2

您可以使用querySelectorAll()将该类的所有输入作为目标，然后使用forEach()遍历它们。

尝试以下方式：

var inputs = document.querySelectorAll('.inputBox');
//console.log(inputFirstName);
Array.from(inputs).forEach(function(el){
  el.addEventListener('focusin', function(){ inputAddClassFunc(this)} );
el.addEventListener('focusout', function(){ inputRemoveClassFunc(this)} );
});


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

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