JSFiddle - React, Tailwind, and code Playground

by Marc Chehab

HTML

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
<div id="display"></div>
<div id="large">
  <div id="realinput"><input /></div>
  <div id="fakeinput"></div>
</div>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

CSS

div {
  width:100%;
}

#large {
  height:200px;
  background:grey;
  position:relative;
}

#fakeinput {
  position:absolute;
  bottom:0px;
  left:0px;
  height:50px;
  background:blue;
}

#display {
  height:200px;
  background:yellow;
}

input {
  width:100%;
  box-sizing:border-box;
}
#realinput {
  display:none;
}

JavaScript

// This is to solve the layout question

$("#fakeinput").click(function(){
	$("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
	$("#realinput").hide();
});

// This should detect if the virtual keyboard is out

var sumedges = $(window).width() + $(window).height();

$(window).resize(function(){
	if($(window).width() + $(window).height() < sumedges) {
  	$("#display").html("keyboard out");
  } else {
  	$("#display").html("keyboard in");
  }
});