JSFiddle - React, Tailwind, and code Playground

by AlexanderPatel

HTML

<input type="text" name="test" placeholder="Name"/>

CSS

.placCover{
      position: relative;
}
.plac{
  position: absolute;
  left: 0;
}
.hide{
  display: none;
}

JavaScript

$(function () {
	$.fn.addPlaceholder = function () {
    $.support.placeholder = 'placeholder' in (document.createElement('input'));
    if (!$.support.placeholder) {
    	$(this).wrap('<div class="placCover"></div>').after('<label class="plac">'+$(this).attr('placeholder')+'</label>').focus(function () {
        $(this).next('label').addClass('hide');
      }).blur(function (){
        $(this).next('label').removeClass('hide');
      });
    }
  }
  $('input').addPlaceholder()
});