Disable navigate back when select is open in chrome

Question

When a user presses backspace in an HTML input it causes a back navigation. I'm able to disable this for inputs but not for selects in google chrome.

Here is an example. Try do do an backspace in the input and you see in the console that the event has been caught, try to select a value with the select and press backspace -> the browser navigates back, completely ignoring the javascript code.

For simplicity I'm just disabling all keys and logging it:

$(document).keydown(function(e){
   e.preventDefault();
   console.log(e.keyCode);
});

Is there any way to intercept the select keydown event when it's open?

How about mouseenter on the dropdown? http://stackoverflow.com/questions/2709474/is-there-a-way-to-determine-if-a-select-dropdown-menu-is-open — misha130, Mar 04 '16 at 13:16
Start the event for keydown and preventDefault if its backspace. On mouseexit stop the event — misha130, Mar 04 '16 at 13:23
Please explain the question.. i couldn't understand the question — praveen, Mar 04 '16 at 13:26
@Elger When i enter any text or number in codepen the corresponding keycode is displayed in console log that too the number is not visible in textbox.on pressing back button it returns the keycode as **8**.What is the actual output you want.If so i select from dropdown nothing happens.. Please tell me clearly — praveen, Mar 04 '16 at 13:49
@praveen: I just want to disable the navigation when pressing the back button when the select is open. — Elger Mensonides, Mar 04 '16 at 13:50
@Elger so after selecting the dropdown , backspace event should not fire on entering textbox right? — praveen, Mar 04 '16 at 13:52
Why would you use a backspace on a select? There is nothing about a select that prompts the user to backspace to undo a selection. — trenthaynes, Mar 04 '16 at 13:55
@whipdancer imagine a select with countries in there. To get there quick, you can type the first letter of the country. Some users type in the wrong letter and think backspace corrects it. — Elger Mensonides, Mar 04 '16 at 13:57
@Elger I would reconsider a select vs. using a typeahead or autocomplete in that scenario. If the control doesn't support the "intuitive" workflow, then I try to find a different control. — trenthaynes, Mar 04 '16 at 14:00
You could use the `onbeforeunload` event attached to the body and display a confirmation to the user before leaving the page. — ilias, Mar 04 '16 at 14:00
@Elger otherwise, focusing on when you moused into and out of the select to be your boundary for capturing the backspace. — trenthaynes, Mar 04 '16 at 14:01

score 1 · Answer 1 · answered Mar 04 '16 at 14:31

I've come up with a solution, I'm using angularjs so I created a directive for it.

.directive('disableBackspace', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var entered = false;

            element.bind('focus',function() {
                // remember that it's focused
                entered = true;
            });

            element.bind('blur',function() {
                // remember that it's blurred
                entered = false;
            });

            scope.$on('$locationChangeStart', function(event, next, current) {
                // in angular it's not onbeforeunload but $locationChangeStart
                // prevent navigation if it's entered
                if(entered) {
                    event.preventDefault();
                }
            });

            element.bind("keydown keypress", function (event) {
                // this is for other form elements 
                if(event.which === 8) {
                    scope.$apply(function (){
                        scope.$eval(attrs.myEnter);
                    });

                    event.preventDefault();
                }
            });
        }
    };
})

You can use the directive like this:

<select disable-backspace>
   <option>123</option> ...

The directive listens to the onfocus and onblur event of the input and when the location is changing, it checks if an input is being focused. Works perfectly. Hope this helps someone.

Disable navigate back when select is open in chrome

1 Answers1