JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Placeholder</h1>
<form>
<input id="title" name="title" type="text" />
<textarea name="detail" id="detail" ></textarea>
</form>
JavaScript
$.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);
$(function(){
var username = $('#username');
var password = $('#password');
username.placehold('Username');
password.placehold('Password');
});