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

3

6

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.

Moralez answered 1/7, 2015 at 7:45 Comment(0)
V
2

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.

Valentinvalentina answered 1/7, 2015 at 22:38 Comment(3)
Looks like it's a bug in Chrome. I have reported it. Thank you for your help.Moralez
Cool technique to change size though it unfortunately breaks keyboard navigation...Phosphorous
You could implement additional events on key up/down, to reproduce same logic, somethink like this fidle: jsfiddle.net/yzr2cmqv/15Valentinvalentina
K
-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();
    }
});
Kinder answered 1/7, 2015 at 8:2 Comment(1)
You didn't understand my qustion. What you did makes it worse. Default event in select is page back and if I add it where you suggest it, it won't work also with a dropdown closed.Moralez
G
-2

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();
    }
});
Gravante answered 1/7, 2015 at 8:36 Comment(2)
hmm, i noticed that my code only work if the select is active, while it is focused but it needs to be closed. I realized it doesn't work while the select is opened..Gravante
I already tried that. It doesn't help. As I said my code works for select when a dropdown is closed. The problem is when a dropdown is opened. And the same problem is in your suggestion.Moralez

© 2022 - 2024 — McMap. All rights reserved.