Show Div once a user has entered text into text area?

Question

i am trying to show my div id 'content2' only once a user has typed at least 4 characters into a text area?

I am trying to use the code below but its not working, please can someone show me where i am going wrong, thanks.

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

I would use the input event that everyone seems to forget about. It fires when tae character is entered into an input instead of on any keydown .

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

Here is a small demo: http://jsbin.com/qoziwoha/2/edit

Answer 3

This can be done in pure 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

Ok, regarding the problems:

First Problem

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

The css selector is looking for an element named content2 whereas you would probably like to select a div with the id of content2, so for that to happen, you should write $('#content2') . If you wanted to select a div with the class content2 , you would write $('.content2') .

Second problem

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

In the above snippet, you're typing in display: block; . Now that's not proper javascript code. You may be confused by the object syntax like { display: 'block' } but in your code above, you don't have the wrapping curly braces {} to create an object. (The curly brackets that are present represent the if () { } else { } block.

The real problem, however, is that you're trying to add a css style on to the #content2 element. In which case, the jQuery syntax is:

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

The logic seems to be correct. Hope this helps.

Answer 5

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

This will show the div once, if the input length goes below 4 characters it will not be hidden again (as per your question). To acheive this instead change to:

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