JSFiddle - React, Tailwind, and code Playground

HTML

<div id="maphead"><input id="start" type="text" spellcheck="false" placeholder="enter your post code" style="text-transform:uppercase;" class="capital"/>
</div>

CSS

#maphead input::-webkit-input-placeholder {
        text-transform:lowercase;
    }
    #maphead input:-moz-placeholder {
        text-transform:lowercase;
    }

JavaScript

function activatePlaceholders() {
        var detect = navigator.userAgent.toLowerCase(); 
        if (detect.indexOf("safari") > 0) return false;
        var inputs = document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++) {
            if (inputs[i].getAttribute("type") == "text") {
                var placeholder = inputs[i].getAttribute("placeholder");
                if (placeholder.length > 0 || value == placeholder) {
                    inputs[i].value = placeholder;
                    inputs[i].onclick = function() {
                        if (this.value == this.getAttribute("placeholder")) {
                            this.value = "";
                        }
                        
                        return false;
                    }
                    inputs[i].onblur = function() {
                        if (this.value.length < 1) {
                            this.value = this.getAttribute("placeholder");
                            $('.capital').each(function() {
            var current = $(this).val();
            var place = $(this).attr('placeholder');
            if (current == place) {
                $(this).css('text-transform','lowercase')
            }
            });
                        }
                    }
                }
            }
        }
    }
    
    window.onload = function() {
        activatePlaceholders();
    }