JSFiddle - React, Tailwind, and code Playground

by Lee Cooper

HTML

<form>
    <input type="text" name="a" value="" placeholder="a_placeholder" />
    <br/>
    <input type="text" name="b" value="" />
    <br/>
    <input type="text" name="c" value="c_value" placeholder="c_placeholder" />
    <br/>
    <input type="text" name="d" value="d_value" />
    <br/>
    <textarea name="e" placeholder="e_placeholder"></textarea>
    <br/>
    <textarea name="f"></textarea>
    <br/>
    <textarea name="g" placeholder="g_placeholder">g_value</textarea>
    <br/>
    <textarea name="h">h_value</textarea>
</form>

<form>
    <input text="text" name="i" value="" placeholder="i_placeholder" />
</form>

JavaScript

(function($) {

    var _placeholderSupported = ('placeholder' in document.createElement('input'));

    $.fn.placeholder = function(method) {
        
        // Only run if placeholders are not supported
        if(!_placeholderSupported) {
    
            if(_methods[method] !== undefined) {
                _methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else {
                _add(this);
            }
            
        }
        
        return this;
    };
    
    var _methods = {
        disable: function(options) {
            
            if(options === true) {
                _remove(this);
            }
            else {
                _add(this);
            }
        }
    };
    
    function _add($set) {
   
        // If the selector contains divs and forms then get a selection of inputs with placeholders
        $set.filter('div, form').find('input[placeholder], textarea[placeholder]').not('[data-placeholder]')
            // add the selector inputs
            .add($set.filter('input[placeholder], textarea[placeholder]').not('[data-placeholder]'))
            // bind the blur and focus events to simulate the show and hide of placeholders
            .bind('focus.placeholder', _elementFocus)
            .bind('blur.placeholder', _elementBlur)
            // Place a marker so that we can filter out the inputs that are already bound using selectors
            .attr('data-placeholder', '')
            // Simply forces the elements to display the placeholders                
            .blur();
    }
    
    function _remove($set) {
    
        $set.filter('div, form').find('input[placeholder], textarea[placeholder]')
            .add($set.filter('input[placeholder], textarea[placeholder]'))
            .unbind('focus.placeholder', _elementFocus)
            .unbind('blur.placeholder', _elementBlur)
            .removeAttr('data-placeholder')
            .each(function(i, item) {
                
      ...