JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<input title="eg. John Smith" class="fillForm" />
<input title="eg. Jayne Doe" class="fillForm" />
<input title="eg. Jayne Doe" />

JavaScript

(function ($) {
    $.fn.fillForm = function () {

        if (this.selector == "") {
            $('.fillForm').each(function () {
                doStuff($(this));
            });
        } else {
            $(this.selector).each(function () {
                doStuff($(this));
            });
        }


        function doStuff(input) {


            input.val(input.attr('title'));

            input.focus(function () {
                if (input.val() == input.attr('title')) {
                    input.val('');
                } else {
                    setTimeout(function () { input.select(); }, 10);
                }
            });

            input.blur(function () {
                if (input.val() == "") {
                    input.val(input.attr('title'));
                }
            });
        }

    };
})(jQuery);


$(document).ready(function () {
    $('input').fillForm();

    //$().fillForm();
});