Javascript 动态检测文本区域是否为空

我试图动态检测textarea是否为空。我这样做是为了只有在文本区域中输入文本时才能显示发送按钮

我尝试了下面的代码，但它不起作用

var text = document.getElementById("text").value;

if (text !== ''){
    alert("works");
    document.getElementById("sendicon1").style.display = "none";         
    document.getElementById("sendicon2").style.display = "inline";         
}
else{
    alert("not working");
    document.getElementById("sendicon2").style.display = "none";         
    document.getElementById("sendicon1").style.display = "inline";
}

---

您还没有将jQuery列为依赖项，但这绝对是一个方便使用jQuery的领域

$('#text').on('input propertychange', function () {
    if ($(this).val() !== "") {
       $("#sendicon1").hide();
       $("#sendicon2").show();
    }
    else {
       $("#sendicon2").hide();
       $("#sendicon1").show();    
    }
});

---

input

事件将检测文本区域的所有更改-按键、复制和粘贴等。

您是否将该代码放入onkeyup或onchange函数中？你可以这样做：

window.onload = function() { 
  var text = document.getElementById("text");
  var func = function() { 
    if (text.value !== '') {
      alert("works");
      document.getElementById("sendicon1").style.display = "none";         
      document.getElementById("sendicon2").style.display = "inline";         
    } else {
      alert("not working");
      document.getElementById("sendicon2").style.display = "none";         
      document.getElementById("sendicon1").style.display = "inline";       
    }
  }
  text.onkeyup = func;
  text.onchange = func;
}

---

您不需要同时使用onkeyup和onchange，这取决于您希望它何时启动。onchange将在您将焦点移开（模糊）后进行，onkeyup将在文本区域内的每个按键按下后进行。

使用

输入事件非常简单

var textarea = document.getElementById("text");
textarea.addEventListener('input', hideOnEmpty);
function hideOnEmpty() {
    var text = this.value;
    if (text !== ''){
        alert("works");
        document.getElementById("sendicon1").style.display = "none";         
        document.getElementById("sendicon2").style.display = "inline";         
    }
    else{
        alert("not working");
        document.getElementById("sendicon2").style.display = "none";         
        document.getElementById("sendicon1").style.display = "inline";
    }
}

有关更多详细信息，请参阅输入事件文档（，）。每次更改textarea的内容时，此代码都会触发
hideOnEmpty
函数

当心-此代码在IE8或更低版本中不起作用，并且可能无法检测IE9中的删除（但没有可靠的方法可以在IE9中不轮询的情况下检查输入是否已更改）。
什么是“不起作用的”？您查看了吗？如果你对你的问题没有更好的了解，我无法提供更具体的解决方案。感谢你对-1的反馈。你是对的，但是你听到的事件应该是“键控”或“更改”，这取决于你想更改的时间（如果你失去焦点->更改，即时->键控）@VDP这不是真的
input
是一个在对输入进行所有更改时触发的事件-这在OP的用例中绝对适用。OP没有要求使用jQuery解决方案。@Ginden因此答案经常建议使用库以实现简单的功能-这有什么不同？在我的回答中，我承认这需要安装jQuery，但它无处不在，我认为有这个答案是很有价值的，如果不是针对OP，那么针对其他有类似问题的人。