textarea为空时禁用submit按钮，输入内容后无法启用的问题排查

原代码的核心问题 #

• 你在disableEnableSubmitButton函数里错误地获取了textarea的值（字符串类型），然后试图给字符串绑定input事件——这完全无效，事件只能绑定在DOM元素上。
• 这个绑定事件的函数从未被调用，所以textarea的输入事件从头到尾都没被监听。
• 只写了启用按钮的逻辑，没处理textarea清空后重新禁用按钮的需求。

修复后的代码 #

HTML部分（无需修改）

<form id="breakdown">
    <textarea id="tbd" placeholder="Enter breakdown details"></textarea>
    <br>
    <input type="submit" id="btn10" value="submit" disabled>
</form>

JavaScript部分

// 获取DOM元素
const textarea = document.getElementById("tbd");
const submitBtn = document.getElementById("btn10");

// 定义状态切换函数
function toggleSubmitState() {
    // 判断textarea是否为空（去除首尾空格，避免输入空格误判）
    submitBtn.disabled = textarea.value.trim() === "";
}

// 绑定输入事件，实时监听内容变化
textarea.addEventListener("input", toggleSubmitState);

// 页面加载时执行一次，确保初始状态正确
toggleSubmitState();

逻辑说明 #

1. 直接获取textarea和按钮的DOM元素，避免重复调用getElementById
2. toggleSubmitState函数通过判断textarea内容（去除首尾空格后）是否为空，直接设置按钮的disabled状态——空则禁用，非空则启用
3. 给textarea绑定input事件，每次输入/删除内容时自动触发状态切换
4. 页面加载时执行一次状态判断，确保初始状态符合预期

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