Question

我正在处理一个有一个textarea和一个提交按钮的基本表单：

<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>

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

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

Answer 1

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

Answer 2

如果您需要连续验证，请按此解决（不更改按钮属性）：

<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属性添加到按钮即可。

Answer 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。

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

3 个答案: