CodePen

HTML

            
              <h1>Testing jQuery key events</h1>
<input type="text" id="text">
<div id="box1">
  Keyup: <span id="len1">0</span>
</div>
<div id="box2">
  Keydown: <span id="len2">0</span>
</div>
<div id="box3">
  Keypress: <span id="len3">0</span>
</div>
<div id="box4">
  Doc Keyup: <span id="len4">0</span>
</div>
<div id="box5">
  Change: <span id="len5">0</span>
</div>
<div id="box6">
  Input: <span id="len6">0</span>
</div>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var ta = $("#text");

ta.on("keyup.lol", function(e){
  console.log(e);
  $("#len1").text(ta.val().length);
  yes("#box1", e.which);
});

ta.keydown(function(e){
  $("#len2").text(ta.val().length);
  yes("#box2", e.which);
});

ta.keypress(function(e){
  $("#len3").text(ta.val().length);
  yes("#box3", e.which);
});

$(document).on('keyup', '#text', function(e){
  $("#len4").text(ta.val().length);
  yes("#box4", e.which);
});

ta.change(function(e){
  $("#len5").text(ta.val().length);
  yes("#box5", e.which);
});

ta.on('input', function(e){
  $("#len6").text(ta.val().length);
  yes("#box6", e.which);
});

var yes = function(box, letter) {
  var yes = $("<span>YES "+letter+"='"+String.fromCharCode(letter)+"'</span>");
  $(box).append(yes);
  yes.fadeOut();
};
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................