Focusout event doesn't work on 1st activation in on input event jQuery

Question

I have a input and focus event. When it's focused, make parent div bigger and when it's not focused make it smaller, but I have focusout event in on input event, to make sure if it's empty. But it works just fine when you focus input, type something, delete that and than click away from that input (focusout) and than it works how I want it to. And it stops to work after you refresh the site, because it "forgets" that you typed there and deleted that. Here is jsfiddle, I think I don't have to post that code, when everything is there -> https://jsfiddle.net/rnotx7rg/

Answer 1

If I understood which is your problem, I think you don't need an input event, but you only have to check if the input field is empty or not on the focusout event.

Here's the JS part:

$('.emailLog').focus(function() {
  $('.emailLogdiv').css({
    'height': '50px'
 });
   $('.emailLogLabel').css({
    'bottom': '50px',
    'font-size': '1.1em'
 });
 $('.emailLog').css({
    'color': 'black'
  });
});

$('.emailLog').focusout(function() {

  if ($(this).val() === '') {

$('.emailLogdiv').css({
  'height': '6px'
});
$('.emailLog').css({
  'color': '#656565'
});
$('.emailLogLabel').css({
  'bottom': '5px',
  'font-size': '1.5em'
});

 } else {

$('.emailLogdiv').css({
  'height': '50px'
});
$('.emailLog').css({
  'color': 'black'
});
$('.emailLogLabel').css({
  'bottom': '50px',
  'font-size': '1.1em'
});

  }

});

Here's the updated jsfiddle