javascript/ jquery focus issue in IE8 and before

Question

I have a small problem.

currently, I have the following function for formatting currency on the focus/blur of an input text field:

jsfiddle

    $('.number').bind({
        focus: function() {
            $(this).val('$' + $(this).val());
        },
        blur: function() {
            var defVal = $(this)[0].defaultValue; 
            var dollars = $(this).val();
            dollars = dollars.replace('$', '');
            dollars = dollars.replace(',', '');
            dollars = parseFloat(dollars).toFixed(2);
            if (!(isNaN(dollars))) {
            $(this).val(dollars);
            } else {$(this).val(defVal).removeClass('inpt_validBlur');};
        }
    });

This works just as desired in Firefox, Safari, and IE9, but in prior versions of IE there is an issue. in IE, when you start typing, your text comes BEFORE the dollar sign, not after. Does anyone know the reason for this and how to get around it?

Thank you

Answer 1

this seems to be working for me. Not perfect, and I dont really like mixing javascript and jquery, but it works.

 $('.inpt').focus(function() {
        var dollars = $(this).val();
        var defVal = $(this)[0].defaultValue;
        $(this).removeClass('inpt').addClass('inpt_Focus');
        if ($(this).val() === defVal || $(this).val() === '$') {
            $(this).val('');
        }
        if ($(this).hasClass('number')) {
            $(this).val('$' + $(this).val());
            var elemLen = $(this).length;
            if (document.selection) {
                var oSel = document.selection.createRange();
                oSel.moveStart('character', -elemLen);
                oSel.moveStart('character', elemLen);
                oSel.moveEnd('character', 0);
                oSel.select();
            }
        }
    });