JSFiddle - React, Tailwind, and code Playground

by devcurry_com

HTML

<!DOCTYPE html>
<html>
<head>
    <title>TextBox Water Marking</title>
</head>
<body>
    <input id="input1" placeholder="Placeholder here..." />
    <input id="input2" placeholder="2nd Placeholder" value="This is actual Text" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(':input').inputWatermark();
        });
    </script>
</body>
</html>

JavaScript

(function ($) {
    $.fn.extend({
        inputWatermark: function () {
            return this.each(function () {
                // retrieve the value of the ‘placeholder’ attribute
                var watermarkText = $(this).attr('placeholder');
                var $this = $(this);
                if ($this.val() === '') {
                    $this.val(watermarkText);
                    // give the watermark a translucent look
                    $this.css({ 'opacity': '0.65' });
                }

                $this.blur(function () {
                    if ($this.val() === '') {
                        // If the text is empty put the watermark
                        // back
                        $this.val(watermarkText);
                        // give the watermark a translucent look
                        $this.css({ 'opacity': '0.65' });
                    }
                });

                $this.focus(function () {
                    if ($this.val() === watermarkText) {
                        $this.val('');
                        $this.css({ 'opacity': '1.0' });
                    }
                });
            });
        }
    });
})(jQuery);