0

大家好，我需要一点帮助。谁能帮助我，在我的情况下如何使用这个关键字？

<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”来处理所有文本框？

4

1 回答 1

1

我会改用事件委托 - 向表单添加focusin和focusout侦听器，当事件触发时，如果事件的目标是.inputBoxes 之一，则执行更改类的逻辑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属性）

于 2020-01-18T07:08:48.443 回答