javascript - 我可以创建一个在删除输入文本时触发的事件吗？

Question

我有一个输入(type=text)和一个选择标签，我只想在输入中键入任何文本时显示它们，但如果删除文本则将其删除。

添加类来显示元素没有问题，但是当从输入中删除文本时，“else”语句无法删除该类。

HTML:

      <div class="form-group">
        <input id="input" type="text" class="form-control">
      </div>

      <div class="form-group hiddenInput">
        <select class="form-control" id="select">
          <option hidden disabled selected value> </option>
        </select>
      </div>

Javascript:

document.getElementById('input').addEventListener('keyup', function(input){
  if(input) {
    document.getElementById('select').classList.add('show');
  } else {
    document.getElementById('select').classList.remove('show');
  }
});

CSS:

.hiddenInput {
  display: none;
}

.hiddenInput.show {
  display: block;
}

Answer 1

您的input参数不是用户在文本框中输入的输入，它是event对象，其中包含有关发生的事件的信息。要从文本框中获取文本，您可以使用this.value。如果对其应用 trim() 方法，则可以删除文本周围的任何空格，这样，如果最终用户仅在输入框中输入空格，您就可以得到一个空字符串。

此外，keyup 事件仅在用户松开按下的键时才会触发您的函数。要获得更即时的响应，您可以使用 input 事件，只要最终用户更改文本框中的文本，该事件就会触发。

要检查文本框是否为空，您可以检查输入的长度，如果为0，则文本框中没有文本，因此您可以隐藏该类。您还需要更改 CSS 样式以定位正确的类，请参阅下面的示例:

document.getElementById('input').addEventListener('input', function(event) {
  if (this.value.trim().length) {
    document.getElementById('select').classList.add('show');
  } else {
    document.getElementById('select').classList.remove('show');
  }
});

.hiddenInput .select-input {
  display: none;
}

.hiddenInput .select-input.show {
  display: block;
}

<div class="form-group">
  <input id="input" type="text" class="form-control">
</div>

<div class="form-group hiddenInput">
  <select class="form-control select-input" id="select">
    <option hidden disabled selected value></option>
  </select>
</div>