如果文本被输入到表单输入中，如何使 div 出现答案

【问题标题】：How to make a div appear if text gets typed into a form input如果文本被输入到表单输入中，如何使 div 出现
【发布时间】：2011-10-07 23:23:48
【问题描述】：

我有一个表单输入，当输入文本时，它会更新一个 div。这是我使用的：

$('#CampaignTitle').keyup(function() {
    $('#titleBar').text(this.value);
});

这非常有效，除了我还希望能够在表单输入中没有文本时隐藏 div（我知道如何让它开始隐藏）。

换句话说，当有人在表单输入中输入时，会出现一个 div，并且输入到输入中的文本会出现在 div 中。如果用户再次清除输入，那么 div 就会消失。

对不起，我是 JS 新手 :)

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

测试一下文本框值的长度是否大于0：

$('#CampaignTitle').keyup(function() {
    if($(this).val().length > 0)
    {
        $('#titleBar').text($(this).val()).show();
    }
    else
    {
        $('#titleBar').hide();
    }
});

这里的关键是if($(this).val().length > 0)。

【讨论】：

据我了解，if comparison 是不必要的；因为0 的长度本质上会返回一个虚假值。因此if ($(this).val() 应该就足够了。但我对 JavaScript 和 jQuery 的许多内在奥秘有点模糊。
你很可能是正确的，但是我想更详细一点，因为 OP 正在学习 JavaScript。另外，我不确定 JS 对 "0" 之类的字符串做了什么。在这种情况下，使用.length 更可靠。

【解决方案2】：

试试这个

$('#CampaignTitle').keyup(function() {
    $('#titleBar').text(this.value).show();
    if (this.value==''){ $('#titleBar').hide() }
});

【讨论】：

【解决方案3】：

$('#CampaignTitle').keyup(function() {
    if (this.value){
        $('#titleBar').text(this.value).show();
    }
    else {
        $('#titleBar').hide();
    }
});

【讨论】：

【解决方案4】：

这样的事情应该可以工作：

$('#CampaignTitle').keyup(function() {

    var $titleBar = $('#titleBar');

    if(this.value.length == 0) {
       $titleBar.hide();
    }

    else { 

       if($titleBar.is(":hidden")) { 
          $titleBar.show();
       }

       $titleBar.text(this.value);
    }
});

它有点冗长，有一些方法可以让它变得不那么冗长，但由于您仍在学习，我认为这可以让您大致了解正在发生的事情。 is(":hidden") 检查可以省略；即使它已经可见，它也会在 $titleBar 上运行 show()。

【讨论】：