CODEWITHSUNDEEP
javascriptjquery
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

How to Disable the CTRL+P using javascript or Jquery?

Here I tried to disable the Ctrl+P but it doesn't get me alert and also it shows the print options

jQuery(document).bind("keyup keydown", function(e){
    if(e.ctrlKey && e.keyCode == 80){
        alert('fine');
        return false;
    }
});

http://jsfiddle.net/qaapD/10/

I am not sure how can I disable the Ctrl+P combination itself using jQuery or JavaScript.

Thanks

Upvotes: 18

Views: 62367

Answers (12)

Sourav Pan
Sourav Pan

Reputation: 11

Here is the code, it work for me

document.addEventListener("keydown", function(event) {
  if (event.ctrlKey && event.key === "p") {
    event.preventDefault();
  }
});

Upvotes: 1

Peter
Peter

Reputation: 6669

After much testings on various browsers, it is easier to intercept the keys when they are down (not pressed) because some of this "App integrated keys" are difficult to intercept with the "keypress" event.

I came up with this script that is sort of cross browser compatible (I didn't test for Microsoft's IE). Notice that the browsers return different codes for some keys. In my case I wanted to prevent Ctrl+P.

The key "P" on chrome is seen as e.keyCode == 80, on opera, it is e.charCode == 16, while on firefox it is e.charCode == 112

$(document).on('keydown', function(e) {
    if((e.ctrlKey || e.metaKey) && (e.key == "p" || e.charCode == 16 || e.charCode == 112 || e.keyCode == 80) ){
        alert("Please use the Print PDF button below for a better rendering on the document");
        e.cancelBubble = true;
        e.preventDefault();

        e.stopImmediatePropagation();
    }  
});

I used jQuery.

Upvotes: 15

Dheeraj Guleria
Dheeraj Guleria

Reputation: 1

Try this

    //hide body on Ctrl + P
    jQuery(document).bind("keyup keydown", function (e) {
        if (e.ctrlKey && e.keyCode == 80) {
            $("body").hide();
            return false;
        }
    });

Upvotes: 0

schwar_01
schwar_01

Reputation: 51

This is basically Peters answer from above. The difference is I added the accountability for mac when pressing the cmd+p button combo to print a page.

$(document).on('keydown', function(e) { 
    if((e.ctrlKey || e.metaKey) && (e.key == "p" || e.charCode == 16 || e.charCode == 112 || e.keyCode == 80) ){
        alert("Please use the Print PDF button below for a better rendering on the document");
        e.cancelBubble = true;
        e.preventDefault();

        e.stopImmediatePropagation();
    }  
});

Upvotes: 3

chandni sharma
chandni sharma

Reputation: 1

<script>
      function isKeyPressed(event) 
      {
        if(event.ctrlKey == 1)
        {
          alert("Please Submit exam form befor printing");
        }
      }
    </script>

<body onkeydown="isKeyPressed(event)">
<p>this is the solution</p>
</body>

Upvotes: -1

bjelli
bjelli

Reputation: 10090

If you want to disable printing of your webpage you're wasting your time: it can't be done. Even if you work out how to capture CTRL-P users can still use the browsers menu bar to find the print command, or they can take a screen shot of the browser.

Stop trying to control the user, put your energy into making your site / app more useful, not less useful.

edit 2016: in the 3 years this has been up it has gathered 3 downvotes. I'm still not deleting it. I think it is important to tell fellow developers when they are given impossible tasks, or tasks that make no sense.

edit 2018: still think it's important that people that have this question read this answer.

Upvotes: -4

Pranit More
Pranit More

Reputation: 516

To disable Ctrl+P printing by using javascript use below code:

window.addEventListener('keydown', function(event) {
    if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
        event.preventDefault();
        if (event.stopImmediatePropagation) {
            event.stopImmediatePropagation();
        } else {
            event.stopPropagation();
        }
        return;
        }
}, true);

Upvotes: 3

user4602228
user4602228

Reputation:

had a journy finding this, should be canceled on the keydown event

document.addEventListener('keydown',function(e){
   e.preventDefault();
   return false;
});

further simplified to :

document.onkeydown = function(e){
   e.preventDefault();
}

given you have only one keydown event

Upvotes: 1

Jack Franzen
Jack Franzen

Reputation: 778

This Actually worked for me in chrome. I was pretty suprised.

jQuery(document).bind("keyup keydown", function(e){
    if(e.ctrlKey && e.keyCode == 80){
         Print(); e.preventDefault();
    }
});

Where Print is a function I wrote that calls window.print(); It also works as a pure blocker if you disable Print();

As noted here: https://stackoverflow.com/a/20121038/2102085

window.print() will pause so you can add an onPrintFinish or onPrintBegin like this

function Print(){
    onPrintBegin
    window.print();
    onPrintFinish(); 
}

(Again this is just chrome, but Peter has a downvoted solution below that claims the keycodes are different for ff and ie)

Upvotes: 1

Shadow Wizzard
Shadow Wizzard

Reputation: 66388

You can't prevent the user from printing, but you can hide everything when the user prints the document by using simple CSS:

<style type="text/css" media="print">
    * { display: none; }
</style>

Updated fiddle.

If you would like to show the visitor a custom message when he/she try to print rather then just a blank page, it's possible with client side code but first wrap all your existing contents like this:

<div id="AllContent">
    <!-- all content here -->
</div>

And add such a container with the custom message:

<div class="PrintMessage">You are not authorized to print this document</div>

Now get rid of the <style type="text/css" media="print"> block and the code would be:

if ('matchMedia' in window) {
    // Chrome, Firefox, and IE 10 support mediaMatch listeners
    window.matchMedia('print').addListener(function(media) {
        if (media.matches) {
            beforePrint();
        } else {
            // Fires immediately, so wait for the first mouse movement
            $(document).one('mouseover', afterPrint);
        }
    });
} else {
    // IE and Firefox fire before/after events
    $(window).on('beforeprint', beforePrint);
    $(window).on('afterprint', afterPrint);
}

function beforePrint() {
    $("#AllContent").hide();
    $(".PrintMessage").show();
}

function afterPrint() {
    $(".PrintMessage").hide();
    $("#AllContent").show();
}

Code is adopted from this excellent answer.

Updated fiddle. (showing message when printing)

Upvotes: 27

Morne
Morne

Reputation: 1743

Your code works in the jsfiddle example? What browser are you using? Itested it with the latest chrome and it worked fine.

You can also add:

e.preventDefault();

Upvotes: 1

lordvlad
lordvlad

Reputation: 5347

there are some shortcuts you simply can't override with javascript, i learned it the hard way. I suppose CTRL+P is one of them.

one way to override them would be to deploy a chrome pacakged app.

Upvotes: 0

Related Questions