当文本区域上的标签输入为空时禁用提交按钮答案

【问题标题】：Disable submit button when Tags Input on textarea is empty当文本区域上的标签输入为空时禁用提交按钮
【发布时间】：2023-01-09 16:33:28
【问题描述】：

我创建了一个表单，用户可以在其中将单词作为标签输入文本区域，并使用 JavaScript 将它们作为字符串提交。我要添加的功能是每当文本区域为空时禁用提交按钮（不包含任何标签）.

到目前为止，这是我尝试过的：

HTML

<form>
  <textarea onkeyup="success()" name="tags" id="tag-input1" required>
  </textarea>
  <p class="instruction">Press enter to add a new word</p>
  <!-- Disable Submit Button -->
  <input type="submit" id="submit" class="save" value="Submit">
</form>

JavaScript

function success() {
  if (document.getElementById("tag-input1").value === "") {
    document.getElementById('submit').disabled = true;
  } else {
    document.getElementById('submit').disabled = false;
  }
}

DEMO

【问题讨论】：

标签： javascript html jquery tags submit

【解决方案1】：

我想你可以检查价值长度。首先，尝试将 disabled 属性添加到 html 中的提交按钮。

 <input type="submit" id="submit" class="save" value="Submit" disabled="true">

然后这里是你的成功函数代码；

    function success() {
      document.getElementById('submit').disabled = !document.getElementById("tag-input1").value.length;
    }

【讨论】：

我已经在我的演示代码上尝试过这个，但是即使我在文本区域上添加了标签，提交按钮仍然被禁用。
检查它是否干净jsfiddle.net/2ya4nzdo

【解决方案2】：

要在标签输入为空时禁用提交按钮，您可以使用以下方法：

向提交按钮添加一个 disabled 属性并将其值设置为 true。这将最初禁用该按钮。

提交
将事件侦听器添加到侦听输入事件的文本区域元素。只要 textarea 的值发生变化，就会触发此事件。

document.querySelector('textarea').addEventListener('input', function() { // 检查标签输入是否为空 });
在事件侦听器中，检查文本区域的值是否为空字符串。如果是，请通过将 disabled 属性设置为 true 来禁用提交按钮。如果该值不为空，则通过将 disabled 属性设置为 false 来启用提交按钮。

document.querySelector('textarea').addEventListener('input', function() { // 检查标签输入是否为空如果 (this.value === '') { document.querySelector('button').disabled = true; } 别的 { document.querySelector('button').disabled = false; } });

这应该在标签输入为空时禁用提交按钮，并在输入不为空时启用它。

我希望这有帮助！

【讨论】：

【解决方案3】：

据我所知，这不是 disable 的工作方式。 Disable 是一个 html 属性，它阻止用户在特定文本中写入数据。尝试在特定消息的值为空时提供错误消息您可以为此使用条件语句

【讨论】：