Question

I have been using the HTML 5 placeholder and just realised that it does not work outside HTML5 devices. As you can see by the code below the placeholder is always in lowercase and the value is always in upper case.

#maphead input::-webkit-input-placeholder {
    text-transform:lowercase;
}
#maphead input:-moz-placeholder {
    text-transform:lowercase;
}
<input id="start" type="text" spellcheck="false" placeholder="enter your post code" style="text-transform:uppercase;" class="capital"/>

This is all fine except when dealing with non HTML 5 devices. For this I have employed a bastardised bit of 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();
    }

Firstly this Javascript is rancid. There must be an easier JQuery way. Now although this above does work (reasonably) it does not respond to keeping the placeholder in lowercase and the value in uppercase since it sets the value with the placeholder.

I’ve set you all up with a nice Fiddle http://jsfiddle.net/Z9YLZ/1/

Answer 1

Try something like this:

$(function() {
    $('input[type="text"]').each(function () {
        $(this).focus(function () {
            if ($(this).attr('value') === $(this).attr('placeholder')) {
                $(this).css('text-transform','lowercase');
                $(this).attr('value', '');
            }
        }).blur(function () {
            if ($(this).attr('value') === '') {
                $(this).css('text-transform','uppercase');
                $(this).attr('value', $(this).attr('placeholder'));
            }
        }).blur();
    });
});

Edit: Explicitly declare the text-transform to cascade properly.