JSFiddle - React, Tailwind, and code Playground

by partkyle

HTML

<input type="text" name="s" id="search" />

CSS

input {
    width: 350px;
}
input.watermark {
    color: #888;   
}

JavaScript

(function($) {
    $.fn.watermark = function(s) {
        $(this).addClass('watermark').val(s).focus(function() {
            $(this).removeClass('watermark');
        }).blur(function() {
            $(this).addClass('watermark');
        });

        return this;
    }
})(jQuery);

$('#search').watermark('This will stay after you click me');