Keyup() not working?

Question

I have a function that is supposed to show how many characters are missing to get to the maximum, however it only counts after the first key is "clickada".

Here is my code

$("#nome_event").keyup(function(){
  var count = $(this).length;
  var dif = 30 - count;
  $("#count_nome2").html(count);
  if(count < 30 ){
    $("#count_nome").html(dif);
  }
});
<div class="form-group">
   <label>Nome do Evento</label>
   <input class="form-control" id="nome_event">
   <p class="help-block"><small>[<span id="count_nome">30</span> | <span id="count_nome2">30</span> Caracteres por usar]</small></p>
</div>

Answer 1

Missed the .val() in:

var count = $(this).val().length;

$("#nome_event").keyup(function(){
  var count = $(this).val().length;
  var dif = 30 - count;
  $("#count_nome2").html(count);
  if(count < 30 ){
    $("#count_nome").html(dif);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label>Nome do Evento</label>
   <input class="form-control" id="nome_event">
   <p class="help-block"><small>[<span id="count_nome">30</span> | <span id="count_nome2">30</span> Caracteres por usar]</small></p>
</div>

When placing $(this).length; only the number of items with the id specified, not the size length of its contents.