Question

I’m having some IE8 javascript issues (joy).

Basically, I’m needing to convert any negative number entries in a certain textbox to a positive value. I figure I would do it like this:

$('input[type="text"]').live('change', function () {
    var number = $(this).val();
    if (number < 0)
    {
        $(this).val(-number);
    }
});

Later on I do stuff when the textbox’s focus is lost:

$('input[type="text"]').live('blur', function () {
    // do stuff with textbox's _positive_ number
})

Unfortunately with IE8 when the value of the textbox is changed (ie. you enter -23 in the textbox), the change event is fired twice and the blur event is not fired at all.

Other modern browsers don’t do this.

1. Why is the change event fired twice?
2. Why is the blur event not firing?
3. How do I fix it?

Go here to see this happening: http://jsfiddle.net/ajbeaven/AwZKM/

Answer 1

When you set the value property of a form element to a different value, the change event fires in IE8 so this line

$(this).val(-number);

triggers the change event again. The other problem you are having with the blur event not firing, if i change the code to

$('input[type="text"]').change( function () {
    var number = $(this).val();
    if (number < 0)
    {
        $(this).val(-number);
    }
    alert('change');

});

$('input[type="text"]').blur(function () {
    alert('blur');
})

It works, which makes me think something is going on when the change and blur event’s are bound with .live. Sorry i know not much of a solution, maybe someone can come up with some ideas after reading this.