Question

So I’m aware that the HTML5 placeholder attribute isn’t supported in IE before IE10, but I really need the functionality.

I thought I could do the following, but it doesn’t seem to work (looks like the .focus and .blur methods aren’t being fired…

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function() {

        function isPlaceholderSupported() {
            var input = document.createElement('input');
            return ('placeholder' in input);
        }

        var placeholderSupport = isPlaceholderSupported();

        if (placeholderSupport == false) {
            $('#store_name').val('Store Name');
        }

        $('#store_name').focus(function() {
            if (placeholderSupport == false) {
                if ($(this).val() == 'Store Name') {
                    $(this).val('');
                }
            }
        });

        $('#store_name').blur(function() {
            if (placeholderSupport == false) {
                if ($(this).val() == '') {
                    $(this).val('Store Name');
                }
            }
        });
    });
</script>

<input type="text" name="store_name" id="store_name" placeholder="Store Name" />

I can’t see any flaw in the logic here, but this just isn’t working. There’s no errors being reported in Chrome’s dev tools and I haven’t tried it in IE9 yet.

Any help will be greatly appreciated!

Answer 1

Check jQuery below only for IE

    $(function() {
       var textBox = $('input[type="text"]');
       textBox.each(function() {
        var self = $(this);
        self.val(self.attr('placeholder'));
       });
    });
    $(document).on('focus', textBox, function() {
        var self = $(this);
       if(self.val() == self.attr('placeholder')) {
           self.val('');
       }
    });
    $(document).on('blur', textBox, function() {
        var self = $(this);
        if(self.val() == '') {
            self.val(self.attr('placeholder'));
        }
    });