如果输入框为空，如何删除CSS

Question

我正在制作一个按钮，只要输入框中有内容就会出现，这个功能很好。但是，如果我删除了所有的内容，它仍然存在，因为我不确定如何在某种切换过程中反转该过程。目前我的代码如下：

$(document).ready(function(){
    $("#issueField").keydown(function(){
        $("#issueTick").css("opacity", "1");
    });    
});

我的问题是，是否有一种方法可以切换这个功能，使得如果输入为空，则将不透明度设置回0？

- danjbh

Answer 1

您可以使用+!!$(this).val()作为CSS不透明度的值。根据输入框中是否有文本内容，它将是0或1。

我建议监听事件而不是事件，因为第一个选项也会响应其他更改输入的方式（如鼠标、上下文菜单...）。

$(document).ready(function(){
    $("#issueField").on("input", function(){
        $("#issueTick").css("opacity", +!!$(this).val());
        
    }).trigger("input");    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="issueField">
<div id="issueTick" style="background: yellow">issue tick</div>

- trincot

Answer 2

虽然我认为有更好的方法来实现这个，比如说，我不知道为什么你使用透明度而不是显示隐藏。下面是应该适用于你的代码：

$(document).ready(function(){
    $("#issueField").keyup(function(){
            if($("#issueField").val()) {
            $("#issueTick").css("opacity", "1");
        } else { 
             $("#issueTick").css("opacity", "0");
        }
    });    
});

请注意，我使用的是keyup事件，因为我们需要在值改变后拦截按键。

- hardkoded

---

我采纳了您的建议，使用显示方法而非不透明度。最初在CSS中使用显示设置有些混乱，但现在看起来还好。 - danjbh

Answer 3

尝试这个。

    $(document).ready(function()
    {
      $("#issueField").keydown(function()
      {
         if($('#issueField').val() == "") 
           {
               $("#issueTick").css("opacity", "1");
           }
        else
          {
               $("#issueTick").css("opacity", "0.1");
          }
     })
   });

- Vinaysingh Khetwal

Answer 4

你需要设置一个模糊事件来检查文本框的值是否为空，这样它就会在失去焦点后将不透明度返回到0。

$(document).ready(function(){
    $("#issueField").keydown(function(){
        $("#issueTick").css("opacity", "1");
    });    
$("#issueField").blur(function(){
if($("#issueField").val()==''){
        $("#issueTick").css("opacity", "0");
}
    });  
});

- Osama

---

这样做违背了OP的初衷，他希望在输入时更新发生，包括不透明度为0的更新。 - trincot