JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<input type="text" d-placeholder="Enter something here" />
<input type="text" d-placeholder="Enter something else here that is long" />
<br />
<button onclick="document.getElementsByTagName('input')[0].parentElement.removeChild(document.getElementsByTagName('input')[0])">remove</button>

CSS

input {
    padding: 10px 15px;
    border: 50px solid red;
    font-size: 25px;
}

JavaScript

(function () {
    function nativePlaceholderSupport() {
        return false;
        
        var test = document.createElement('input');
        return ('placeholder' in test);
    }
    
    function appendStyle(element, style) {
        var attrStyle = element.getAttribute('style');
        if (attrStyle) {
            currentStyles = element.getAttribute('style').split(';');
        } else {
            currentStyles = [];
        }

        for (var i = 0; i < currentStyles.length; i++) {
            var s = currentStyles[i].split(':');
            var key = s[0].trim();
            if (!(key in style)) {
                style[key] = s[1];
            }
        }

        var styleString = '';
        for (var prop in style) {
            styleString += prop + ':' + style[prop] + ';';
        }

        element.setAttribute('style', styleString);
    }

    function updatePlaceholderShimText(input) {
        if (!input.placeholderShim) return;        
        var placeholderText = input.getAttribute('d-placeholder');
        if (placeholderText === null || typeof placeholderText === 'undefined') {
            return;
        }
        
        input.placeholderShim.childNodes[0].nodeValue = placeholderText;
    };
    
    function applyPlaceholderShim(input) {
        // check if the input has a placeholder attribute
        var placeholderText = input.getAttribute('d-placeholder');
        if (placeholderText === null || typeof placeholderText === 'undefined') {
            if (input.placeholderShimIsBound) {
                // the placeholder attribute was removed, call destroy
                destroy(input);
            }
            return;
        }
        
        // If the shim is already bound to this input, then just update the placeholder text and return
        if (input.placeholderShimIsBound) {
            // update the placeholder text
            updatePlaceholderShimText(input);
            return;
        }

       ...