JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<div id="maphead"><input id="start" type="text" spellcheck="false" class="capital"/>
</div>

JavaScript

jQuery.fn.placehold = function(place) {
    var i = document.createElement('input');
    var placeholder =  'placeholder' in i;
    
    if(placeholder) {
        this.attr("placeholder", place);
    } else {
        this.val(place);
        this.css({color: 'grey'});
    }
    
    this.blur(function() {
        var e = $(this);
        if(e.val()=="" && !placeholder) {
            e.val(place);
            e.css({color: "grey"});
        }
    }).bind("focus focusin click mousedown", function() {
        var e = $(this);
        if(e.val()==place && !placeholder) {
            e.css({color: 'black'});
            e.val("");
        }
    }).bind("keydown keypress keyup change", function() {
        var e = $(this);
        e.val(e.val().toUpperCase());
    });
    
    
};

$(function() {
    $('#start').placehold("enter your post code");
});