CODEWITHSUNDEEP
javascript
Raúl Nicolás Cortés Santibañez
Raúl Nicolás Cortés Santibañez

Reputation: 67

how to prevent the default shortcut triggering from browser

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;
    }

});

Upvotes: 2

Views: 1057

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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.

Upvotes: 1

CodeWizard
CodeWizard

Reputation: 142312

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.

Upvotes: 0

Related Questions