JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<label>Enter a date:
    <input type="text" placeholder="Enter a value" />
</label>
<br />
<label>Enter a date:
    <input type="text" placeholder="012345789" />
</label>
<br />
<button onclick="document.getElementsByTagName('input')[0].setAttribute('placeholder', 'updated');">Set placeholder text</button>

CSS

input {
    padding-right: 25px;
    padding-left: 5px;
    height: 50px;
    width: 145px;
}

JavaScript

/* 
 * The MIT License
 *
 * Copyright (c) 2014 Tony Leeper
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), 
 * to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, 
 * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

(function () {
    function getContentElementFromInput(input) {
        return input.parentElement.getElementsByTagName('placeholder-shim-content')[0];
    }

    function updatePlaceholderText(input, placeholderText) {
        var content = getContentElementFromInput(input);
        content.childNodes[0].nodeValue = placeholderText;
    }

    function applyPlaceholderShim(input) {
        var placeholderText = input.getAttribute('placeholder');
        if (!placeholderText) {
            return;
        }

        if (input.placeholderShimIsBound) {
            updatePlaceholderText(input, placeholderText);
            input.placeholderShim_setPlaceholderVisibility();
            return;
        }
        input.placeholderShimIsBound = true;

        var currentStyle = window.getComputedStyle(input);
        var paddingTop = currentStyle.paddingTop;
        var...