Question

I have a form with some select lists that will show/hide more input fields when certain values are selected.

The problem is that most of the users are data entry people so they heavily use the keyboard when entering data and a select list’s change event only fires when focus has left the input if done via keyboard. I’ve tried adding the same functionality to keypress and keydown and those work great, but not in IE.

Unfortunately my users are mostly state workers so they are forced to use IE, does anyone know a workaround?

Here is my code:

$("div.error_editor select.refReason").live({
    'change': function() {
        var text = $(this).find(":selected").text();
        $(this).parent().siblings("span").toggle();
    },
    'keypress': function() {
        $(this).change();
    }
});

EDIT: It appears this also doesn’t work in Chrome, but works fine in Firefox

Answer 1

I found a solution that works in IE and Chrome, I changed keypress to keyup

$("div.error_editor select.refReason").live({
    'change': function() {
        var text = $(this).find(":selected").text();
        $(this).parent().siblings("span").toggle();
    },
    'keyup': function() {
        $(this).change();
    }
});