JSFiddle - React, Tailwind, and code Playground

by camel2243

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js&quot;   integrity=&quot;sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="></script>
<div>
  <input type="text" placeholder="email"/>
</div>

CSS

div{
  padding:8px 13px;
}

input.focus
{
  color: #aaa;
}

JavaScript

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

if(isIE)
{
	input=$('input');
  // register event listener
  input.on('focus', function(){
  	updateInput(input);
  	}).on('click', function(){
    	updateInput(input);
    }).on('keydown',  function(){
    }).on('keyup', function(){
    	updateInput(input);
    });
}

function updateInput(inputElem)
{
	console.log(inputElem.val());
	if(!inputElem.val() || inputElem.val() === PLACEHOLDER)
  {
  	inputElem.addClass('focus');
    inputElem.val(PLACEHOLDER);
    setCursorStart(input.get(0));
  }
  else
  {
  	inputElem.removeClass('focus');
  }
}

function setCursorStart(inputElem)
{
	if(inputElem.setSelectionRange)
 	{
  	inputElem.focus();
  	inputElem.setSelectionRange(0, 0);
 	}
 	else
 	{
  	if (inputElem.createTextRange)
  	{
   		var range = inputElem.createTextRange();
   		range.collapse(true);
   		range.moveEnd('character', 0);
   		range.moveStart('character', 0);
   		range.select();
  	}
 	}
}