james-huston · March 3, 2014 19:06
diff --git a/iOS keyboard show and hide event b/iOS keyboard show and hide event
 <html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <style>
    .block_test {
      position: absolute;
      top: 0;
      left: 0;
      background-color: silver;
    }
  </style>
 </head>
 <body>

  <div class="block_test" resize-to-viewport>
    super duper
    <div>
      <input type="text" placeholder="blarg!" id="testinput" />
    </div>
  </div>

  <script>
  (function (window, undefined) {
    var document = window.document;
    var testInput = document.getElementById('testinput');

    var keyboardShow = new CustomEvent(
      "onkeyboardshow",
      {
        detail: {
        },
        bubbles: true,
        cancelable: false
      }
    );

    var keyboardHide = new CustomEvent(
      "onkeyboardhide",
      {

      }
    );

    testInput.addEventListener('focus', function () {
      document.dispatchEvent(keyboardShow);
    });
    testInput.addEventListener('blur', function () {
      document.dispatchEvent(keyboardHide);
    });

    document.addEventListener('onkeyboardshow', function () {
      console.log('keyboard show');
    });
    document.addEventListener('onkeyboardhide', function () {
      console.log('keyboard hide');
    });
  })(window);
  </script>


 </body>
 </html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<style>
	.block_test {
	position: absolute;
	top: 0;
	left: 0;
	background-color: silver;
	}
	</style>
	</head>
	<body>

	<div class="block_test" resize-to-viewport>
	super duper
	<div>
	<input type="text" placeholder="blarg!" id="testinput" />
	</div>
	</div>

	<script>
	(function (window, undefined) {
	var document = window.document;
	var testInput = document.getElementById('testinput');

	var keyboardShow = new CustomEvent(
	"onkeyboardshow",
	{
	detail: {
	},
	bubbles: true,
	cancelable: false
	}
	);

	var keyboardHide = new CustomEvent(
	"onkeyboardhide",
	{

	}
	);

	testInput.addEventListener('focus', function () {
	document.dispatchEvent(keyboardShow);
	});
	testInput.addEventListener('blur', function () {
	document.dispatchEvent(keyboardHide);
	});

	document.addEventListener('onkeyboardshow', function () {
	console.log('keyboard show');
	});
	document.addEventListener('onkeyboardhide', function () {
	console.log('keyboard hide');
	});
	})(window);
	</script>


	</body>
	</html>