如果输入为空则禁用按钮

Question

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

\n\n

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

\n\n

\r\n

\r\n

//javascript\r\nlet inputElt = document.getElementById(\'input\');\r\nlet btn = document.getElementById(\'button\');\r\n\r\nif (inputElt.value !== \'\') {\r\n  btn.disabled = false;\r\n} else {\r\n  btn.disabled = true;\r\n}

\r\n

<input placeholder="Enter some text" name="name" id=\'input\' />\r\n<button id=\'button\'>R\xc3\xa9server</button>

\r\n

\r\n

\r\n

\n

Answer 1

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

\n\n

\r\n

\r\n

let inputElt = document.getElementById(\'input\');\r\nlet btn = document.getElementById(\'button\');\r\n\r\ninputElt.addEventListener("input", function(){\r\n  btn.disabled = (this.value === \'\');\r\n})

\r\n

<input placeholder="Enter some text" name="name" id=\'input\'/>\r\n<button id=\'button\' disabled>R\xc3\xa9server</button>

\r\n

\r\n

\r\n

\n