how to prevent the default shortcut triggering from browser

Question

Well, Im trying to make a custom shortcut for a web application. But I have a little problem ( I tried to find a solution but I only found the preventDefault and shortcut.add , I didnt understand well the second one)

I want to know how can I use the custom shortcut of my code without calling the browser shortcut. And if I use shift key the default shotcut wont disable the uppercase writing.

thx a lot for the help, greetings from chile.

var menu_abierto=false;

$(document).on('keypress',function(e){

    if(e.which==69 && e.ctrlKey && menu_abierto==false){

      $('.btn-1,.btn-2 ,.btn-3').prop('disabled',true);    
      $('#lista-emergencias').show();
      MenuLateralIzq();
      listarEmergencias();
      menu_abierto=true;
    } else if(e.which==69 && e.ctrltKey){
      $('.btn-1 ,.btn-2, .btn-3').prop("disabled",false);
      $('#lista-emergencias ul li').remove();
      $('#lista-emergencias ul hr').remove();
      $('#lista-emergencias').hide();
      OcultarMenuIzq();
      menu_abierto=false;
    }

});

You have a typo btw `e.ctrltKey` instead of `e.ctrlKey`. And you don't need to check `booleans` like that. `menu_abierto==false` is the same as `!menu_abierto`. — Arg0n, Dec 01 '15 at 12:41

score 1 · Accepted Answer · edited May 23 '17 at 12:30

You have to add e.preventDefault() to prevent the default browser action and then come your custom action :

if( e.target.tagName.toUpperCase() != 'INPUT' ){
   if(e.which==69 && e.ctrlKey && menu_abierto==false){
        e.preventDefault();

        $('.btn-1,.btn-2 ,.btn-3').prop('disabled',true);    
        $('#lista-emergencias').show();
        MenuLateralIzq();
        listarEmergencias();
        menu_abierto=true;
    } else if(e.which==69 && e.ctrltKey){
        e.preventDefault();

        $('.btn-1 ,.btn-2, .btn-3').prop("disabled",false);
        $('#lista-emergencias ul li').remove();
        $('#lista-emergencias ul hr').remove();
        $('#lista-emergencias').hide();
        OcultarMenuIzq();
        menu_abierto=false;
    }
}

Add if( e.target.tagName.toUpperCase() != 'INPUT' ){ if you want to disable this for inputs.

Explanation :

e.target mean the current selected element, tagName get the type of this element incase of input field that will return INPUT, toUpperCase() just to make sure that the INPUT string returned is on mode UpperCase, != 'INPUT' mean if not input in other words if the element selected is not an input field then you can replace the browser shortcuts by the customs ones.

Check SO question/answers javascript capture browser shortcuts (ctrl+t/n/w).

Hope this helps.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You need to set 2 things:

e.stopPropagation()

Prevents further propagation of the current event.

e.preventDefault()

Cancels the event if it is cancelable, without stopping further propagation of the event.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 01 '15 at 12:42

CodeWizard

128,036
21
144
167

i have just one problem with your solution, when I want to use uppercase on the letter the shortcut uses on an input field, the uppercase doesnt show util I release the shift key. how can i fix this? – Raúl Nicolás Cortés Santibañez Dec 01 '15 at 14:13

how to prevent the default shortcut triggering from browser

2 Answers2

e.stopPropagation()

e.preventDefault()