javascript - 输入输入后立即将禁用按钮设置为false？

Question

我的按钮有点问题，无法按我想要的方式运行。因此，一旦在放置文本字段中输入文本输入，我就试图让我的按钮将禁用设置为 false。但目前它仅在文本字段焦点更改后才有效。

我已经添加了我的代码作为示例，但我不确定如何在不需要单击文本字段的情况下立即完成此操作。

function checkInput() {
  var tbValue = document.getElementById('tb').value;
  if (tbValue != '') {
    document.getElementById('next').disabled = false;
  }
}

.btn {
  width: 75px;
  height: 30px;
}

.inputElement {
  height: 24px;
}

<input type="text" class="inputElement" id="tb" autocomplete="off" onchange="checkInput()">

<input type="button" class="btn" id="next" value="Next" disabled>

标签： javascripthtml

Answer 1

您可以使用keyup（释放任何键后触发）事件或oninput（值已更改）而不是onchange（仅在输入失去焦点时触发）。

const nextButton = document.getElementById('next');
const input = document.getElementById('tb');

function checkInput() {
  nextButton.disabled = !input.value;
}

.btn {
  width: 75px;
  height: 30px;
}

.inputElement {
  height: 24px;
}

<input type="text" class="inputElement" id="tb" autocomplete="off" oninput="checkInput()">
<input type="button" class="btn" id="next" value="Next" disabled>

提示：

您的解决方案不会disabled再次激活。我已经if用显式赋值替换了你的语句。

一遍又一遍地选择你的元素keyup也不是有效的。我之前选择过一次并将它们分配给常量变量。