Question

I wrote a js and it look like

$('#searchform').keydown( function( event ) {
    if ( event.which == '13' ) {
        submitForm();
        return;
    }else if ( event.which == '27' ){
        alert("ESC keydown TO DO - Clear the contents from search box ");
        $('#id_search').val('');
    }
});

This will remove contents of that input box, but when i comment alert message, it will not. Could you please explain me why??

Answer 1

OK, figured out what happens.

In Firefox browser, the flow of events is:

1. User press the ESC key.
2. The keydown event handler is called, value is changed to empty string.
3. The textbox value is “recalculated” as the keyup event occurs, resulting in the previous value.

In other words, you can’t directly change the value during keydown event.

One simple workaround is using a timer, changing the value after a millisecond:

$('#searchform').keydown( function( event ) {
    if ( event.which == '13' ) {
        submitForm();
        return;
    }else if ( event.which == '27' ){
        //alert("ESC keydown TO DO - Clear the contents from search box ");
        window.setTimeout(function() {
            $('#id_search').val('');
        }, 1);
    }
});

Updated fiddle.