CODEWITHSUNDEEP
javascriptinternet-explorerkeyboard-shortcutsinternet-explorer-11
Alex
Alex

Reputation: 274

can not disable Ctrl+O by JavaScript in IE 11

I'm trying to disable Ctrl+o key combination in IE, the following code works fine in all IE versions except IE 11 unless I do an alert as you see in code below: 

document.onkeydown = function(event) {
    var x = event.keyCode;
    console.log(event.keyCode);
    console.log(event.ctrlKey);
    if ((x == 79) && (event.ctrlKey)) {
        if(navigator.userAgent.match(/rv:11.0/i)){
            alert('Disabled');
        }
        event.cancelBubble = true;
        event.returnValue = false;
        event.keyCode = 0;
        event.stopPropagation();
        event.preventDefault();

        return false;
    }
};

I was wondering if anyone else is experiencing the same issue and they have solved it. :-) Thanks. Alex

Upvotes: 7

Views: 2904

Answers (2)

dperish
dperish

Reputation: 1571

I came to the same conclusion as Alex & Max. In my specific use case, forcing compatibility mode would break other features.

I believe that in most cases a confirm dialog is the best workaround, as it still feels somewhat natural to the user - save for the extra step involved.

http://jsfiddle.net/dperish/sp72c0wt/3/

HTML:

<h1>Demonstration of IE11 event bubbling issue</h1>

<label>Enable Workaround<input type="checkbox" id="enableWorkaround"></label>

    <p>Pressing CTRL-P or CTRL-O should NOT show the default open/print dialogs.  The only workaround seems to be to interrupt the main thread either with alert(), confirm(), or by hitting a breakpoint in a debugger. </p>

 <p>Unfortunately, a synchronous/blocking XHR call was not useful for this purpose.  Nor was using the browser-specific showModalDialog.</p>


<div id="output"></div>

Javascript:

function onKeyDown(e) {

    e = e || window.event;

    if ((e.keyCode === 79 || e.keyCode === 80) && e.ctrlKey) {

        e.preventDefault();
        e.stopPropagation();
        e.returnValue = false;

        if ($("#enableWorkaround").is(":checked")) {
            if (confirm("Run some custom method?")) {
                customMethod(e.keyCode);
            }
        }
        else {
            customMethod(e.keyCode);
        }
        return false;
    }

}

function customMethod(x) {
    $("#output").append("<p>CustomMethod Says: KeyCode = " + x + "</p>");
    return false;
}

$(document).ready(function() {

    $(document).on("keydown", function (e) {
        onKeyDown(e);
    });

});

Upvotes: 1

Max Mammel
Max Mammel

Reputation: 51

I have no good solution unfortunately, but have created a case with Microsoft, and made a jfiddle that demonstrates the issue.

The only way we have found around this is the use of the:

<meta http-equiv="X-UA-Compatible" content="IE=7">

header, but there's no telling when support for that will go away - not to mention the obvious side-effects of running in IE7 mode.

Some additional notes:

  • Although the interception works natively on IE8 and IE9, only the IE=7 UA mode works
  • A page reload is required for the header to take effect, whether it is in the page or returned in the server response i.e. you cannot selectively jump in an out of IE7 mode in a single page app
  • Here is a link to the standards that IE11 was built against: http://www.w3.org/TR/DOM-Level-3-Events/#KeyboardEvent-supplemental-interface

Fiddle:

http://jsfiddle.net/bw5sLd15/1/

// The kitchen sink
function killKey( event ) {
    event.cancelBubble = true;
    event.bubbles = false;
    event.returnValue = false;
    event.stopPropagation();
    event.stopImmediatePropagation();
    event.preventDefault();
    return false;
}

Upvotes: 1

Related Questions