jquery select dropdown ignores keydown event when it's opened?

Question

I'm trying to prevent backspace button to go one page back in every browser. For now I'm using this code:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

It works fine for everything except when a select field dropdown list is opened, this event is ignored and a backspace takes me one page back anyway. How can I solve this problem? Thank you for your answers.

Answer 1

Just for the info, this is Google Chrome specific since your code works fine in IE and FF.

If you really need this to work you could render a fake dropdown and than set select programmaticly.

You can change the size of dropdown to appear as it was open, something like this: https://jsfiddle.net/yzr2cmqv/

<div clas="select-wrap">
    <div class="fake-select"></div>
    <select class="select">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
</div>

$(".fake-select").on("click", function () {
    var numOfOpen = $("select.select option").size();
    $(".select").attr("size", numOfOpen).css("overflow", "hidden");
    $(this).hide();
});

$(".select").on("click", function () {
    $(".select").attr("size", 1);
    $(".fake-select").show();
});

Other than that I don't think you can do anything since Chrome events are not firing when dropdown is open.