muffinresearch/jsbin.lulage.css

## jsbin.lulage.css
* {
  -moz-box-sizing: border-box;
  /*box-sizing: border-box;*/
}

.red {
  background: red;
}

.blue {
  background: blue;
}

main {
  min-height: 1024px;
}

## jsbin.lulage.html
<!DOCTYPE html>
<html>
<head>
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <main>
    <input id="inp" type="text">
  </main>
</body>
</html>

## jsbin.lulage.js
(function($) {
  var resizeDelay = 100;
  var $win = $(window);

  function getEvtHandler(evtType, handleObj) {
    var guid = handleObj.guid;
    var resizeEventName = 'resize.' + guid;
    var callback = handleObj.handler;
    var $el = $(this);
    var timer;

    return $el.bind(evtType, function(e){
      var w = $win.width();

      console.log(evtType + ' fired: ' + guid);
      $win.on(resizeEventName, function(){
        // console.log(resizeEventName + ' fired');
        window.clearTimeout(timer);
        timer = window.setTimeout(function() {
          console.log(w);
          // If it's a keyboard raising/lowering
          // then width should stay the same.
          if (w === $win.width()) {
            $win.unbind(resizeEventName);
            callback.apply($el);
          }
        }, resizeDelay);
      });
      // Just in-case kill resize listener after <n> ms.
      // if it's already done this will be a noop;
      window.setTimeout(function(){
        console.log('Removing resize event: ' + resizeEventName);
        $win.unbind(resizeEventName);
      }, 1000);
    });
  }

  $.event.special.keyboardRaise = {
    add: function(handleObj){
      getEvtHandler.call(this, 'focus.keyboardRaise', handleObj);
    },
    remove: function(handleObj) {
      $(this).unbind('focus.keyboardRaise');
    }
  };

  $.event.special.keyboardLower = {
    add: function(handleObj){
      getEvtHandler.call(this, 'blur.keyboardLower', handleObj);
    },
    remove: function(handleObj) {
      $(this).unbind('blur.keyboardLower');
    }
  };

}(jQuery));


$('#inp').on('keyboardRaise', function() {
  $('body').addClass('blue');
}).on('keyboardLower', function(){
  $('body').removeClass('blue').addClass('red');
});
	* {
	-moz-box-sizing: border-box;
	/box-sizing: border-box;/
	}

	.red {
	background: red;
	}

	.blue {
	background: blue;
	}

	main {
	min-height: 1024px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<main>
	<input id="inp" type="text">
	</main>
	</body>
	</html>
	(function($) {
	var resizeDelay = 100;
	var $win = $(window);

	function getEvtHandler(evtType, handleObj) {
	var guid = handleObj.guid;
	var resizeEventName = 'resize.' + guid;
	var callback = handleObj.handler;
	var $el = $(this);
	var timer;

	return $el.bind(evtType, function(e){
	var w = $win.width();

	console.log(evtType + ' fired: ' + guid);
	$win.on(resizeEventName, function(){
	// console.log(resizeEventName + ' fired');
	window.clearTimeout(timer);
	timer = window.setTimeout(function() {
	console.log(w);
	// If it's a keyboard raising/lowering
	// then width should stay the same.
	if (w === $win.width()) {
	$win.unbind(resizeEventName);
	callback.apply($el);
	}
	}, resizeDelay);
	});
	// Just in-case kill resize listener after <n> ms.
	// if it's already done this will be a noop;
	window.setTimeout(function(){
	console.log('Removing resize event: ' + resizeEventName);
	$win.unbind(resizeEventName);
	}, 1000);
	});
	}

	$.event.special.keyboardRaise = {
	add: function(handleObj){
	getEvtHandler.call(this, 'focus.keyboardRaise', handleObj);
	},
	remove: function(handleObj) {
	$(this).unbind('focus.keyboardRaise');
	}
	};

	$.event.special.keyboardLower = {
	add: function(handleObj){
	getEvtHandler.call(this, 'blur.keyboardLower', handleObj);
	},
	remove: function(handleObj) {
	$(this).unbind('blur.keyboardLower');
	}
	};

	}(jQuery));


	$('#inp').on('keyboardRaise', function() {
	$('body').addClass('blue');
	}).on('keyboardLower', function(){
	$('body').removeClass('blue').addClass('red');
	});