2

I need to prevent the user from being able to press CTRL and plus to zoom out or minus for zooming in.

Is there any way of doing it ?

Matt
  • 74,352
  • 26
  • 153
  • 180
  • 4
    This is usually a built-in browser feature, so it's not likely something you can prevent. – maerics May 13 '14 at 19:23
  • there is not any way to stop reaction when the user press these keys? –  May 13 '14 at 19:23
  • What for? You can try to catch the key events and call `event.preventDefault`, but you always might be overruled. – Bergi May 13 '14 at 19:24
  • @user3396302: even if you could stop the shortcut key there is usually a menu item like "View > Zoom In" that you could not prevent the user from clicking. – maerics May 13 '14 at 19:24
  • 1
    @Bergi: Tried that. Doesn't work http://jsfiddle.net/C5KTu/ You can't override browser behaviour. – gen_Eric May 13 '14 at 19:26
  • 1
    Moreover, Ctrl+ is a usability feature of the browser. You cannot stop the browser from doing things. Moreover, you shouldn't want to, as it could prevent users with poor eyesight from viewing your pages and possibly end in lawsuit like the one the American Association for the Blind brought against Target. – J. A. Streich May 13 '14 at 19:27
  • 2
    @RocketHazmat: I had expected something more like http://jsfiddle.net/C5KTu/4, but yes, it doesn't work. [Notice that *some* shortcuts *can be overridden*](http://stackoverflow.com/q/7295508/1048572), that's why I proposed to try it out. – Bergi May 13 '14 at 19:41

3 Answers3

4

if you want to prevent zooming in general (also with ctrl + mouseweel and touch-gestures on portable devices) you can simply add a meta-tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

note that this could be disabled by browser-settings or -plugins and most desktop-browsers don't notice it anyway. the meta-tag can also be deleted using the dev-tools built in to most modern browsers.

it's not 100% safe - this just prevents your users from "accidently" zooming on your site.

oezi
  • 51,017
  • 10
  • 98
  • 115
  • 1
    I tried this in chrome, and I could still zoom. http://jsbin.com/lakemavu/1 (try to zoom). Here's the HTML: http://jsbin.com/lakemavu/1/edit – gen_Eric May 13 '14 at 19:28
  • 2
    That doesn't prevent desktop browsers from scaling. NOR SHOULD IT. that meta tag isn't in w3c standards, and accessibility and useability _SHOULD_ allow users to zoom. – J. A. Streich May 13 '14 at 19:28
  • i think it is for the android zooming. –  May 13 '14 at 19:31
2

No, that cannot be prevented as that's happening at the browser level. It's not doing anything to your code -- it's simply telling the browser to scale whatever it's rendering to xx% of its normal size when it displays it. You cannot control what the browser does with your page once it's rendered it -- you can only control what you provide it to render.

Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
0

You can try to block the key on your website using javascript 

document.onkeydown = function (e) {
  if (e.keyCode === 17) {
    //alert('your alert here');
    return false;
  }
};

the keycode is:

ctrl = 17
[+] (num) = 107
[-] (num) = 109

Lucas Haas
  • 331
  • 1
  • 2
  • 15