JSFiddle - React, Tailwind, and code Playground

by mixmatrix

HTML

<form>
    <input id="username" name="username" type="text" />
    <input id="password" name="password" type="password" />
</form>

JavaScript

$(function(){
    var username = $('#username');
    var password = $('password');
	username.placehold('Username');
	password.placehold('Password');
});
$.fn.placehold = function(){
	var placeholderEmpty = function() {
		var $this = $(this);
		if ($this.val() == $this.data("placeholder")) {
			$this.val("");
		}
	};

	var placeholderDefault = function () {
		var $this = $(this);
		if ($this.val() == "") {
			$this.val($this.data("placeholder"));
		}
	};

	return function(placeholder) {
		this.data("placeholder", placeholder)
		.focusin(placeholderEmpty)
		.focusout(placeholderDefault)
		.trigger("focusout");
	}
}(jQuery);