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.

Answer 2

Just add the select tag to your selector:

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

Answer 3

You'll have to check for keydown event on $(select) right now, if you add

console.log(e.which)
console.log(e.target)

you'll notice that you won't get the keydown event when you click and press your keyboard while the select dropdown is active.

This will make it for your

$(document).on("keydown", $('select'), function (e) {
    if (e.which === 8) {
        e.preventDefault();
    }
});