如果將文本輸入到表單輸入中，如何顯示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();
    }
});