textarea empty 应该显示禁用按钮答案

【问题标题】：textarea empty should show disabled buttontextarea empty 应该显示禁用按钮
【发布时间】：2010-09-15 09:52:10
【问题描述】：

我有一个文本区域和一个按钮。有两个类 buttonEnabled 和 buttonDisabled。我只想在文本区域中有一些文本时应用 buttonEnabled。因此，如果用户在文本区域中键入，则按钮看起来已启用，并且当他通过选择和剪切或退格键清除所有文本时。我希望我的按钮看起来被禁用。我也想只用 javascript 来做这件事，出于某种原因不想使用 jQuery。

【问题讨论】：

您的问题到底是什么？你被困在哪里了？
我已经在 textarea 上使用了 keyup 事件，所以一切正常。但是当我用鼠标时，选择 textarea 中的所有文本并剪切它。我的 textarea 变为空，并且按钮看起来仍处于启用状态。但是，如果 textarea 为空，我想一直显示我的按钮处于禁用状态。

标签： javascript html textarea

【解决方案1】：

目前，您可以确保立即获得每个输入内容更改的唯一方法是轮询它。这是因为在不生成keyup 或立即change 事件的情况下，可以通过多种方式编辑输入。除了剪切和粘贴，还有拖放、撤消/重做、自动完成、拼写检查更改...

HTML5 提出了一个input 事件，该事件在所有情况下都会触发，但不幸的是，浏览器还没有支持。

您当然可以通过更快地检查您确实收到事件的常见情况来备份轮询。例如：

function watchInput(input, callback) {
    var value= input.value;
    function check() {
        if (input.value!==value)
            callback.call(input, value);
        value= input.value;
    }
    input.onchange=input.onkeyup= check;
    setInterval(check, 400);
};

watchInput(document.getElementById('mytextarea', function(oldvalue) {
    document.getElementById('mybutton').className= this.value===''? 'buttonDisabled' : 'buttonEnabled';
});

【讨论】：

【解决方案2】：

处理 onblur 事件和 onkeyup 事件。这是一个简单的 Javascript 示例。

<html>
<head>
<script>

function setClass()
{
    var area = document.getElementById('textarea');
    var button = document.getElementById('button');

    if (area.value.length == 0)
        button.className = "buttonDisabled"
    else
        button.className = "buttonEnabled"
}

</script>
</head>
<body>

<textarea id="textarea" onkeyup="setClass()" onblur="setClass()"></textarea><br />
<button id="button" class="buttonDisabled">Your Button<button>

</body>
</html>

【讨论】：

只有当我的焦点在文本区域之外时才会执行模糊。考虑一个场景，当我加载我的表单时，我的按钮被禁用。然后我开始输入我的按钮在输入时启用。现在我用鼠标选择所有文本并剪切文本我的焦点仍然在文本区域上，它是空的，但我的按钮看起来已启用。

【解决方案3】：

在 blur 事件上编写相同的代码（您在 keyup 事件上编写的代码）。

看到这个答案 Disallow typing of few of characters e.g.'<', '>' in all input textboxes using jquery

在那个答案中，它是使用 jQuery 完成的，目的不同，但您也可以在不使用 jQuery 的情况下做您需要的事情。

【讨论】：

ismail 请把我的 cmets 看给 Wduffy。在当前情况下，您的回答对我没有帮助。