textarea空应显示禁用按钮

问题描述：

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

你的问题到底是什么？你卡在哪里？ – 2010-09-15 09:53:34

我已经在textarea上使用了一个keyup事件，所以所有的工作都很好。但是，当我用鼠标，选择textarea中的所有文本并将其剪下。我的textarea变空了，按钮看起来仍然有效。但是，如果textarea为空，我想显示我的按钮始终处于禁用状态。 – 2010-09-15 09:55:23

答

目前，唯一可以肯定的输入内容拿起每变化立竿见影的办法就是对其进行轮询。这是因为有许多可能的方式可以在不生成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'; 
});

答

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

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

在这个问题的答案是它使用jQuery做，目的是不同的，但你也可以做你需要的东西，而无需使用jQuery的。

ismail请看我对Wduffy的评论。您的回答在当前情况下无法帮助我。模糊 – 2010-09-15 10:15:07

答

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

只有当我有我的焦点之外的textarea执行。考虑一个场景，当我加载我的表单我的按钮被禁用。然后我开始键入我的按钮变得启用时键入。现在我用鼠标选择所有文本并剪切文本，我的焦点仍然在空的textarea上，但我的按钮看起来是启用的。 – 2010-09-15 10:14:16

textarea空应显示禁用按钮

相关推荐