Question

我正在尝试动态检测textarea是否为空。我这样做，所以只有在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";
}

Answer 1

您是否将该代码放在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将在textarea中按下每个键之后。

Answer 2

input事件非常容易。

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";
    }
}

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

注意 - 此代码在IE8或更低版本中不起作用，并且无法在IE9中检测到删除（但是没有可靠的方法来检查输入是否在IE9中没有轮询时发生了变化）。

Answer 3

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

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

input事件将检测textarea键按下，复制和粘贴等所有更改。

动态检测textarea是否为空

3 个答案: