仅当 textarea 中有字符时才启用提交按钮答案

【问题标题】：Enable submit button only when there are characters in textarea仅当 textarea 中有字符时才启用提交按钮
【发布时间】：2014-10-11 13:39:04
【问题描述】：

我正在开发一个包含一个文本区域和一个提交按钮的基本表单：

<form action="admin-post.php" method="post">

    <textarea style="width:630px;" aria-hidden="true" class="wp-editor-area" rows="6" autocomplete="off" cols="71" name="author_message" id="author_message"></textarea>

    <p class="submit">
        <input type="submit" value="Post Message" class="button button-primary" id="submit" name="submit">
    </p>

</form>

我希望只有在文本区域中输入了一些文本时才启用提交按钮。我怎样才能使用 Javascript 做到这一点？

请注意，我无法更改提交按钮的值或 HTML 代码。

【问题讨论】：

标签： javascript html forms textarea

【解决方案1】：

如果需要持续验证，可以这样解决（不改变按钮属性）：

<textarea style="width:630px;" aria-hidden="true" class="wp-editor-area" rows="6" autocomplete="off" cols="71" name="author_message" id="author_message" onkeyup="if(this.textLength != 0) {submit.disabled = false} else {submit.disabled = true}"></textarea>

并修改body标签：

<body onload="submit.disabled = true">

干杯

JSFiddle

编辑：

如果不能修改body标签，只需给按钮添加disabled属性即可。

【讨论】：

我无法完成这项工作。你能告诉我一个使用 JSFiddle 的工作示例吗？请注意，我无法调整页面的正文标记，但是，我可以将“禁用”添加到提交按钮，并且所有 Javascript 都必须插入正文标记内。所以就在表格上方。
我的代码演示了一个在 body 标记内使用 javascript 的解决方案。（textarea "author_message" 放在 body 部分）你的意思是在 body- 和 form-tag 之间吗？
效果很好。我有最后一个问题。浏览器兼容性如何？这适用于大多数浏览器吗？
应该！我使用 FireFox 和 Chrome 对其进行了测试。 Microsoft IE 在处理代码时总是有点笨，这也取决于版本。如果不能正常工作，请尝试添加disabled="disabled" 而不是仅添加disabled。

【解决方案2】：

这里的工作代码JSBIN :) 我使用了HTML Disable 属性

【讨论】：

正如我在问题中所指出的，我无法更改提交按钮的 HTML。当这仍然可能时，您有不同的方法吗？

【解决方案3】：

您需要先在 DOM 中找到提交按钮并将其禁用，然后将事件侦听器附加到 textarea，其中您根据 textarea 是否为空来禁用/启用提交按钮：

document.getElementById("submit").disabled = true;
document.getElementById("author_message").addEventListener('change', func, false);

function func(){
 document.getElementById("submit").disabled =  (document.getElementById("author_message").value==='') ;
}

这里是JsFiddle。

【讨论】：