Caro leitor(a), gostaria de informar e mostrar hoje como deixar a sua tela WEB configurada para fechar automaticamente quando for clicado a tecla ESC do teclado.

Usado: HTML, JavaScript, Visual Studio 2010, Plataforma ASP.NET.

    Muitas empresas estão acostumadas em clicar ESC para sair da tela do sistema desktop. O problema de hoje é que a maioria dos aplicativos são do tipo web ou usa a plataforma ASP.NET.

    O legal é que o comando é simples e fácil de colocar em qualquer página “PopUp” do seu sistema. O primeiro de tudo é colocar a tag <body> na página “PopUp” com a propriedade “onkeydown” ativada.

    Você precisa identificar a tecla KeyCode antes de tudo. (Code 1)

 

switch (event.keyCode) {

     case SAIR: //Tecla ESC para sair do Sistema

        SairSistema();

        break;

     default: //Default e a respota SIM

        break;

}

 

Code 1

    Note que o comando switch verificar o evento keyCode. Esse evento KeyCode retona um valor em número. Depois verifiquei se é igual ao SAIR registrado anteriormente. Caso for igual ele chama outra função chamada SairSistema().

    A função SairSistema() chamada apenas o comando Window.Close(). Code 2.

 

    function SairSistema() {

        window.close();

    }

 

Code 2

    É importante dizer que a tecla ESC equivale ao número 27 e a tecla ENTER equivale ao valor 13. No topo do JavaScript coloquei algumas constantes com o número de cada tecla. (Code 3).

 

    //Variáveis globais

    var ENTER = 13; //Tecla Enter para executar

    var SAIR = 27; //Tecla ESC

 

Code 3

    Em alguns casos, usei o try catch para facilitar a vida do usuário no caso de qualquer erro.  No body, coloquei o nome da função. (Code 4)

 

<script type="text/javascript">

    //Variáveis globais

    var ENTER = 13; //Tecla Enter para executar

    var SAIR = 27; //Tecla ESC

 

    //pegar a tecla

    function GetKeyPress() {

        try {

            switch (event.keyCode) {

                case SAIR: //Tecla ESC para sair do Sistema

                    SairSistema();

                    break;

                default: //Default e a respota SIM

                    break;

            }

        }

        catch (e) {

            window.close();

        }

 

    }

 

    //sair do sistema       

    function SairSistema() {

        try {

            window.close();

        }

        catch (e) {

            window.close();

        }

    }

</script>

 

Code 4

    Após colocar as funções dentro da página, basta chamar na propriedade onkeydown. (Code 5).

 

<body onkeydown="GetKeyPress()"></body>

 

Code 5

    Com essa propriedade chamando a função, se a tecla for clicada, a página vai fechar sem perguntar nada. Cuidado no momento que for colocar isso junto do seu sistema. Muitas pessoas não sabem fazer isso, por isso é legal colocar uma mensagem perguntando se realmente quer fechar a tela.

    Para colocar a mensagem, basta acrescentar o seguinte código. Só alterei o método principal GetKeyPress. (Code 6).

 

    //pegar a tecla

    function GetKeyPress() {

        try {

            switch (event.keyCode) {

                case SAIR: //Tecla ESC para sair do Sistema

                    if(confirm('Deseja sair da página?'))

                        SairSistema();

                    break;

                default: //Default e a respota SIM

                    break;

            }

        }

        catch (e) {

            window.close();

        }

 

    }

 

Code 6

    Veja a imagem abaixo. (Image 1)


Image 1

    Note que a linha acrescentada foi o if(confirm(‘Deseja sair da pagina?’)). Todo esse artigo foi testado no Firefox e IE, funcionou perfeitamente. Bom, espero que tenha te ajudado e qualquer problema pode entrar em contato.