JSFiddle - React, Tailwind, and code Playground

by camel2243

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

CSS

.input-wrapper {
  border: 1px solid #bbb;
  width:152px;
 }
 
.input-wrapper label{
 	cursor: text;
 	position: absolute;
  height: 22px;
  padding: 6px 7px;
  font-size: 15px;
  line-height: 10px;
  color: #999;
 }
 
.input-wrapper.focus label {
     filter:alpha(opacity=50);
     opacity: 0.4;
 }
 
 .input-wrapper.filled label {
     display: none;
 }

JavaScript

var PLACEHOLDER="email";
// detect if IE6-IE11 browser(duck typing)， user-agent not reliable
var isIE = false || !!document.documentMode;

if(isIE)
{
  document.body.innerHTML='<div class="input-wrapper"><label for="input">email</label><input id="input" type="text" /></div>';
	var input=$('.input-wrapper > #input');
 	input
    .on('focus', function(){
 		  update.call(this).addClass('focus');
 		}).on('blur', function(){
 	    update.call(this).removeClass('focus');
 		}).on('keydown', update);
 			update.call(this);
 
 		function update() {
 			var $input = $(this),
 			$parent = $input.parent('.input-wrapper');
 			return $parent[$input.val() ? 'addClass' : 'removeClass']('filled');
 		}
}
else
{
  document.body.innerHTML='<input id="input" type="text" placeholder="email" />';
}