Vedovelli

Saudações meus caros leitores,

Há muito que estou com vontade de dar a atenção que blog (e vcs) merece, mas a vida anda atribulada e por isso não tenho encontrado tempo.

Hoje eu precisei desabilitar a ação padrão de todas as teclas de função (F1 a F12) ao utilizar um browser para acessar uma app Flex. A necessidade se deve ao fato do sistema atual ter funções específicas associadas a estas teclas. No novo sistema (o que estamos desenvolvendo em Flex) essas funções devem permanecer e associadas as mesmas teclas. Isso é mandatório e a empresa não pode abrir mão.

Assim, lá fui eu procurar soluções prontas em Javascript. Após não encontrar nada de muito consistente, decidi escrever minha própria solução, utilizando fragmentos de diversas dicas isoladas. Para facilitar as coisas, estou usando a JQuery para gerenciar eventos e me informar sobre qual o browser atual.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
 
	// Captura o evento da tecla pressionada e associa à função grabKey
	$(document).keydown(grabKey); // Para IE, Chrome e FF
	$(document).keypress(grabKey); // Para FF, Safari e Opera
 
	function grabKey(event){
 
	  var e = (window.event) ? window.event : event; // Essecial para funcionar no IE
 
	  if(e.keyCode >= 112 && e.keyCode < = 123){ // Verifica se a tecla pressionada é F1 a F12
 
	  	if ($.browser.msie) {
		  	e.returnValue = false;  // Previne o comportamento padrão no IE
			e.cancelBubble = true;  // Previne o comportamento padrão no IE
			e.keyCode = 0;   // Previne o comportamento padrão no IE
			document.onhelp=new Function("return false"); // Previne a abertura do help no IE
			window.onhelp=new Function("return false"); // Previne a abertura do help no IE
		} else {
			e.stopPropagation(); // Previne o comportamento padrão nos browsers bons
			e.preventDefault(); // Previne o comportamento padrão nos browsers bons
	  	}
	  }
	}
</script>
</script>

O script functionou corretamente nos seguintes browsers:

• IE 6+
• FF 3 Windows
• FF 3 Mac
• Chrome
• Safari 4 Windows
• Safari 4 Mac
• Opera 9

Basta usar o código acima no seu index.template.html encontrado na pasta html-template do seu projeto Flex. Este arquivo é utilizado para geração do html container de sua app Flex.

Agora, basta chamar suas funções AS3 a partir do Javascript, utilizando Flex AJAX Bridge ou então capturando o ato de pressionar a tecla diretamente pelo Flex.

Um abraço,

Ved