JSFiddle - React, Tailwind, and code Playground

by matthewbj

HTML

<p> <input type="text" placeholder="This"> </p>

<p> <input type="text" placeholder="That"> </p>

<p> <input type="text" placeholder="and the Other"> </p>

<p> <a href="http://matthewbjordan.me/mph" target="_top" style="color:#09f">Back to Site</a></p>

CSS

p { padding:8px }

input { font-size:1.1em }

JavaScript

/*
Minimal Placeholder Plugin Version 3
Released under the CC BY 3.0 License (http://creativecommons.org/licenses/by/3.0/)
matthewbjordan.me/mph
*/

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

        /*
          Setup a test to see if placeholder is natively supported
        */
        var phsupport = false,
            phtest = document.createElement('input');
        if ('placeholder' in phtest) {
            phsupport = true;
        }

        if (phsupport === false) { // no native support, run the code.
            return this.each(function () {
                if ($(this).is('input') || $(this).is('textarea')) { // filter the elements

                    /*
                      Set the return-to color
                    */
                    if ($(this).attr('style') === undefined) {
                        var color = '#000';
                    } else {
                        var color = $(this).css('color');
                    }

                    /*
                      Run the main function
                    */
                    $(this).css('color', '#999').val($(this).attr('placeholder')).on({
                        focus: function () {
                            var val = $(this).val();
                            var text = $(this).attr('placeholder');
                            if (val === text) {
                                $(this).val('').css('color', color);
                            }
                        },
                        blur: function () {
                            var val = $(this).val();
                            var text = $(this).attr('placeholder');
                            if (val === '') {
                                $(this).val(text).css('color', '#999');
                            }
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    };
})(jQuery);



try {
   ...