,

Hide or Close Div Using Escape Key JavaScript | jQuery | AngularJS

Esc key on our keyboard can be useful even in Web pages and applications. We can use Esc key to close dialogue boxes or any custom popup modals. Here we will discuss even handling on ESC key press in which we can fire any event we want. Let’s handle ESC key press events in Javascript,…

By.

•

min read

Esc key on our keyboard can be useful even in Web pages and applications. We can use Esc key to close dialogue boxes or any custom popup modals. Here we will discuss even handling on ESC key press in which we can fire any event we want.

Let’s handle ESC key press events in Javascript, jQuery, and AngularJS.

 

 

In Javascript, we will bind the OnKeyUp event on the window object. In that even we will add a condition if KeyCode is 27 which is of ESC key press, In that event, we will hide the element having an ID

var boxid = "MyBoxID";
 window.onkeyup = function (event) {
  if (event.keyCode == 27) {
    document.getElementById(boxid).style.visibility="hidden";
  }
 }

 

In jQuery, we will use the KeyDown event to bind on the document object.

var elem = "#elementID"; 
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $( elem ).hide();
    }
});

In AngularJS we need to add a directive which will bind a keyDown event to the body tag

    angular.module('app').directive('body', function() {
        return{
            restrict : "E",
            link: function(scope, elm, attrs) {
                elm.bind('keydown', function(evt) {           
                      if (evt.which == 27) {
                        //Change Boolean Value Here or Any Other Login
                        $scope.isModalOpen = false;
                        console.log(evt.which);               
                      }
                });
            }
        }
    })

 

2 responses to “Hide or Close Div Using Escape Key JavaScript | jQuery | AngularJS”

  1. Vitolker Avatar

    Thanks for the info.

  2. Asim Avatar
    Asim

    •

    Hi,

    Thanks bro, It works

Leave a Reply

Your email address will not be published. Required fields are marked *