Desenvolvimento - ASP. NET
Tecla ESC na tela WEB
Veja neste artigo como deixar a sua tela WEB configurada para fechar automaticamente quando for clicado a tecla ESC do teclado.
por Mauricio JuniorCaro 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.
Mauricio Junior - Formado pela Faculdade Anhanguera, Especialista pela FGV (Fundação Getúlio Vargas), Pós-Graduação em Docência Superior e cursando Mestrado na UNB Engenharia Elétrica; .
Tenho 29 anos e possuo sete livros publicados pela editora Ciência Moderna e sou editor do Linha de Código.
Sou Certificado Microsoft MCP, MCAD e MVP, faço parte da comunidade ASPNETI.COM, onde publico artigos, vídeos, ebooks e livros Publico artigos, vídeos e podcast em outras comunidades. Trabalho como Analista de Sistemas / Desenvolvedor na empresa ATP S/A.
Blog: blog.mauriciojunior.org
Site pessoal: www.mauriciojunior.org
