启用提交按钮只有当有textarea的字符

问题描述：

我的工作有一个文本区域和一个提交按钮基本形式：启用提交按钮只有当有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代码。

答

如果你需要不断验证解决它像这样（不更改按钮属性）：

<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标签，只需添加禁用属性按钮。

我无法完成这项工作。你能给我看一个使用JSFiddle的工作示例吗？请注意，我无法调整页面的主体标记，但是，我可以将“禁用”添加到提交按钮，并且必须将所有Javascript都插入到body标记中。所以就在表单上方。 – 2014-10-11 14:29:03

我的代码演示了一个解决方案，在身体标记中的JavaScript。（textarea“author_message”放在body部分）你是指body和form-tag之间的意思吗？ – Flash1232 2014-10-11 14:37:11

工程很棒。我有一个最后的问题。浏览器兼容性如何？这会在大多数浏览器上运行吗？ – 2014-10-11 14:37:49

答

在这里工作代码JSBIN :)我用HTMLDisable属性

正如我在我的问题中指出的，我无法更改提交按钮的HTML。当这仍然有可能时，你有不同的方法吗？ – 2014-10-11 14:01:37

答

你需要找到在DOM先提交按钮，并禁用它，然后附加一个事件监听器的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的字符

相关推荐