Question

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

Answer 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';
});

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

Answer 3

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

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

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

textarea空应该显示禁用按钮

3 个答案: