Preventing default action of keys in browser

Question

I tried event.preventDefault and event.stopPropagation and returning false from event handlers.

Nothing helps preventing behavior of certain keys in browsers.

For example i want to use Page Down and Page Up to navigate between the records (Next, Previous) in AngularJS app, fetching next or previous record. It works fine. But it does not prevent the browser performing default action on Page Down or Page Up. For example, pressing those while standing on select (dropdown) element will change the selection of the dropdown and THEN move to next record. Same thing goes practically for many other useful keys that are impossible to overwrite: Home, End (will make select dropdown change to first or last selection if focused on it).

Here's my current code:

$document.bind('keyup', function(e) {
    switch (e.keyCode) {
        case 109:
            if (e.altKey) {
                $scope.gotoPrev(e);
                e.preventDefault();
                e.stopPropagation();
                window.scrollTo(0, 0);
                return false;
            }
            break;
        case 107: ....

As you see i'm currently using other keys (Alt+, Alt- etc) instead of Page Down and Page Up. But i wanted to use those.

Another related question is, how to prevent tab key tabbing into the url area. I want it only cycle through the fields on the page, NOT jump out of he page and into the url area.

Answer 1

Use 'keydown' rather than 'keyup'

keyup Fires when the user releases a key, after the default action of that key has been performed. (http://www.quirksmode.org/dom/events/keys.html)