Question

当用户在HTML输入中按下退格键时，会导致返回导航。我可以针对输入禁用此功能，但不能针对Google Chrome中的选择禁用此功能。

这是example。尝试在输入中执行退格操作，并在控制台中看到事件已被捕获，尝试使用select选择一个值并按退格键 - ＆gt;浏览器导航回来，完全忽略了javascript代码。

为简单起见，我只是禁用所有密钥并记录它：

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

有没有办法在选择的keydown事件打开时拦截它？

Answer 1

我已经提出了一个解决方案，我使用angularjs，所以我为它创建了一个指令。

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

你可以使用这样的指令：

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

该指令侦听输入的onfocus和onblur事件，当位置发生变化时，它会检查输入是否正在被聚焦。完美的工作。希望这有助于某人。

禁用在chrome中打开select时导航回来

1 个答案: