用戶將文本輸入到文本區域后顯示Div？

Question

我僅在用戶在文本區域中輸入至少4個字符后才嘗試顯示div ID'content2'？

我正在嘗試使用下面的代碼，但無法正常工作，請有人告訴我我要去哪里了，謝謝。

HTML：

<input type="text" id="field_post" name="vat" onfocus="document.getElementById('field_vat').style.background='#ffffff';" onkeyup="showDiv()" onchange="showDiv()"/>

使用Javascript：

<script>
$("#field_post").on('keydown', function(event) {
    var currentString = $("#field_post").val()
    $("content2").html(currentString.length);
    if (currentString.length <= 500 )  {  /*or whatever your number is*/
      display:block;
    } else {
       display:none;
    }
});
</script>

Answer 1

document.getElementById("content2").innerHTML=document.getElementById("field_post").value.length;
 if (document.getElementById("field_post").value.length >=4 )  {  /*or whatever your number is*/
      document.getElementById("content2").style.display="block";
    } else {
      document.getElementById("content2").style.display="none";
    }

Answer 2

我將使用每個人似乎都忘記的input事件。 當將tae字符輸入到input而不是keydown任何keydown時，它將觸發。

$('#field_post').on('input', function () {
  var characterCount = this.value.length;
  $('#content2').text(characterCount).toggle(characterCount > 3);
});

這是一個小演示： http : //jsbin.com/qoziwoha/2/edit

Answer 3

這可以在純JS中完成：

var field   = document.getElementById("field_post"),
    content = document.getElementById("content2");

field.onkeydown = function(){
  var len = this.value.length;
  content.innerHTML = len;

  if (len <= 4){
    content.style.display = "none";
  }else{
    content.style.display = "block";
  }
}

Answer 4

好，關於問題：

第一個問題

$("content2").html(currentString.length);

css選擇器正在尋找一個名為content2的元素，而您可能希望選擇一個ID為content2的div，因此，為實現這一點，您應該編寫$('#content2') 。 如果要選擇具有content2 類的div，則應編寫$('.content2') 。

第二個問題

if (currentString.length <= 500 )  {  /*or whatever your number is*/
  display:block;
} else {
   display:none;
}

在上面的代碼段中，您輸入的是display: block; 。 現在，這不是正確的javascript代碼。 您可能會對{ display: 'block' }類的對象語法感到困惑，但是在上面的代碼中，您沒有用大括號{}來創建對象。 （出現的大括號表示if () { } else { }塊。

但是，真正的問題是，您試圖在#content2元素上添加CSS樣式。 在這種情況下，jQuery語法為：

$('#content2').css('display', 'block');

邏輯似乎是正確的。 希望這可以幫助。

Answer 5

$("#field_post").on('keydown', function(event)
{
    var len = $(this).val().length;
    if(len >= 4)
    {
        $('#content2').text(len).show();    
    }
}

這將顯示div一次，如果輸入長度小於4個字符，則不會再次隱藏（根據您的問題）。 為了達到這個目的，改為：

$('#content2').text(len).toggle(!!len);