如果输入为空，则禁用按钮答案

【问题标题】：Disable a button if empty input如果输入为空，则禁用按钮
【发布时间】：2019-08-13 12:14:10
【问题描述】：

如果输入为空，我希望禁用“发送”按钮。我想在 JavaScript 文件中管理它。我知道在 HTML 中可以对输入调用函数，但我更喜欢在 js 文件中使用事件。

https://codepen.io/leakcim-web/pen/gOYPpqo

//javascript
let inputElt = document.getElementById('input');
let btn = document.getElementById('button');

if (inputElt.value !== '') {
  btn.disabled = false;
} else {
  btn.disabled = true;
}

<input placeholder="Enter some text" name="name" id='input' />
<button id='button'>Réserver</button>

【问题讨论】：

使用input事件
在你的 js 中使用 addEventListener 到你的 inputElt，并更新监听器禁用的 btn...
我遇到了类似的问题，这个问题/答案对我帮助很大。谢谢。
我在这里发布了我的问题和解决方案，如果它可以帮助任何人stackoverflow.com/questions/65501771/…

标签： javascript addeventlistener dom-events

【解决方案1】：

您可以使用addEventListener 将事件添加到文本框并根据需要启用/禁用

let inputElt = document.getElementById('input');
let btn = document.getElementById('button');

inputElt.addEventListener("input", function(){
  btn.disabled = (this.value === '');
})

<input placeholder="Enter some text" name="name" id='input'/>
<button id='button' disabled>Réserver</button>

【讨论】：

我会使用btn.disabled = !this.value;，默认情况下在DOM上设置disabled属性，而不是在JS中设置它?
@AdrienMartinet 我同意在 DOM 中设置禁用。更新。我选择保持接近 OP 的逻辑检查，但你的方式也可以正常工作。
调用String.prototype.trim() 是值得的，否则可以提交一串空白（我知道这不是规定的要求）。
感谢您的帮助。 @Jamiec我不明白这部分： btn.disabled = (this.value === '');禁用是不是布尔值？我不明白为什么它被赋值 this.value === ''
Yes Disable 是一个布尔属性w3schools.com/tags/att_disabled.asp :)

【解决方案2】：

作为娱乐，你可以在 CSS 和 html 中做到这一点，参考 Matching an empty input box using CSS

#input:invalid + button {
    opacity: 0.5;
    pointer-events: none;
}

<input placeholder="Enter some text" name="name" id='input' required="required"/>
<button id='button'>Réserver</button>

如果你在按钮和输入之间有一些东西，你可以使用#input ~ #button.，你也不需要id属性，你可以在按钮上使用type="submit"，然后使用input ~ [type="submit"]，那么它将适用于任何输入相同的嵌套。

【讨论】：

有趣的替代方案 :) 谢谢