Jquery Select Dropdown Ignores Keydown Event When It's Opened?

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 &&

Solution 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">
    <divclass="fake-select"></div><selectclass="select"><optionvalue="1">one</option><optionvalue="2">two</option><optionvalue="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.

Solution 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();
    }
});

Solution 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();
    }
});