如果将文本输入到表单输入中，如何显示div

Question

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

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

除了我还喜欢隐藏div的能力（我知道如何让它从隐藏开始）时，表格输入中没有文字。

换句话说，当某人键入表单输入时，将显示div，并且输入到输入中的文本将显示在div中。 如果用户再次清除输入，则div消失。

对不起，我是JS的新手:)

Answer 1

进行测试以查看文本框的值是否大于0：

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

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

Answer 2

这样的事情应该有效：

$('#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() ，即使它已经可见。

Answer 3

尝试这个

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

Answer 4

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