实现textarea标签输入为空时禁用提交按钮的方法

你的现有代码存在两个核心问题：

1. textarea标签默认包含换行和空格，初始状态下value并非空字符串，导致页面加载时提交按钮不会被禁用
2. 仅判断value === ""无法过滤用户输入纯空格的情况，这种场景下也应该禁用按钮

下面是优化后的实现方案：

优化后的代码 #

HTML部分 #

<form>
  <textarea name="tags" id="tag-input1" required></textarea>
  <p class="instruction">按回车键添加新单词</p>
  <input type="submit" id="submit" class="save" value="提交" disabled>
</form>

• 清除textarea内部的默认空白内容，避免初始值干扰判断
• 给提交按钮默认加上disabled属性，保证页面加载时就处于禁用状态

JavaScript部分 #

// 获取页面元素
const tagInput = document.getElementById('tag-input1');
const submitBtn = document.getElementById('submit');

// 判断输入内容是否有效（非空且非纯空白字符）
function isInputValid() {
  return tagInput.value.trim() !== '';
}

// 更新提交按钮的禁用状态
function updateSubmitState() {
  submitBtn.disabled = !isInputValid();
}

// 绑定事件：键盘输入、粘贴内容时同步更新按钮状态
tagInput.addEventListener('keyup', updateSubmitState);
tagInput.addEventListener('paste', updateSubmitState);

// 页面初始化时执行一次状态检查
updateSubmitState();

关键改进说明 #

• 使用trim()方法去除输入内容的首尾空白字符，确保纯空格输入会被判定为空
• 替换内联onkeyup事件为标准事件监听，代码更符合现代前端开发规范
• 增加paste事件监听，避免用户粘贴空白内容时按钮状态不更新
• 初始化时主动执行状态检查，修正页面加载时的按钮状态异常

内容的提问来源于stack exchange，提问作者Dae