Eventos de teclado são semelhantes a eventos de mouse, contudo, capturam eventos que se originam do teclado, como pressionar um tecla ou alterar um texto dentro de um campo de formulário. Com frequência, os eventos de teclado são usados com jogos incorporados ao navegador e validação de formulários inline. Em alguns sites que solicitam um nome de usuário, o script de validação de nome do usuário geralmente valida os dados à medida que digitamos e provavelmente é acionado ao capturar eventos que se originaram do teclado. A Tabela 4.4 apresenta a lista de eventos de teclado e o que cada função faz.
Tabela 4.4 Nomes e funções dos eventos de teclado jQuery Nome do evento
de teclado
Função do evento de teclado
keydown() É acionado quando uma tecla é pressionada pela primeira vez keypress() É acionado quando uma tecla é pressionada novamente ou várias vezes keyup() É acionado quando uma tecla sobe após ser pressionada
A validação é uma parte essencial de qualquer formulário Web. Os dados que recebemos de usuários têm a mesma qualidade que os métodos utilizados para nos certifi carmos de que os dados são claros e podem ser utilizados. O evento change é um dentre os vários da Tabela 4.4 que permitem a confi rmação de um campo de texto assim que o texto ou o número tiverem sido alterados dentro dele. Ao contrário do que vários desenvolvedores amadores possam pensar, os métodos de validação exclusivos do JavaScript não são seguros e precisam de validação de backup do servidor, dependendo de quais dados estão sendo validados.
Uma melhoria usada com frequência, como visto na Figura 4-12, é o campo de inserção de status do Twitter que permite digitarmos no máximo 140 caracteres. Cada vez que uma letra é inserida no campo de entrada, um número é subtraído do total de caracteres permitidos. O texto na página exibe quantos caracteres restantes há.
O evento de alteração é confi gurado com o método bind da mesma maneira que outros eventos.
$('.container').bind('change', function())};
Neste tutorial, demonstro como podemos criar um script de caracteres restantes semelhante àquele utilizado no Twitter. O resultado fi nal deste tutorial é mostrado na Figura 4-13.
1. O primeiro passo envolve criar HTML. Defi na um campo de texto e atribua a ele um ID de status. Esse campo é usado com o evento change para detectar os caracteres que são adicionados.
<textarea cols="50" rows="5" id="status"></textarea>
2. Adicione uma div vazia chamada counter. Esse é o local em que o número de caracteres restantes é exibido, à medida que digitamos no campo de texto.
<div class="counter"></div>
3. Confi gure uma variável chamada maxNum, que é a quantidade máxima de caracteres permitidos; defi na-a como 100.
var maxNum = 100;
Caracteres restantes em um limite de 140 caracteres
Figura 4-12: A função de limite máximo no campo de status do Twitter
4. Crie uma declaração de seletor que corresponde o elemento status e vincula o evento
keypress ao manipulador de eventos. O evento keypress é acionado cada vez que uma tecla é pressionada no teclado, o que é o evento perfeito para testar o texto em um campo de formulário enquanto o foco está dentro do elemento status.
$('#status').bind({ keypress : function() { });
});
5. Após o keyup ser acionado, precisamos capturar o valor do campo de inserção de status. Confi gurei uma variável chamada inputText que armazena esse valor. Confi gurei também outra variável que se chama numChar; ela armazena a extensão da variável
inputText. A seguir, criei uma variável chamada charRemain que contém o resultado da subtração de numChar de maxNum.
$('#status').bind({ keypress : function() {
var inputText = $(this).val(); var numChar = inputText.length; var charRemain = numChar - maxNum; });
});
6. Após confi gurar todas essas variáveis, preciso adicionar uma declaração condicional usando um operador de comparação para verifi car se o valor de numChar é menor ou igual a maxNum. Se a expressão retornar true, seleciono o elemento counter e altero o texto dentro da variável charRemain (número de caracteres restantes).
$('#status').bind({ keypress : function() {
var inputText = $(this).val(); var numChar = inputText.length; var charRemain = numChar - maxNum; if (numChar <= maxNum) {
$('.counter').text(charRemain); }
}); });
7. Por fi m, é preciso adicionar uma declaração else if que verifi ca se o maxNum é maior que numChar. Se essa expressão retornar true, impeça que o usuário digite mais letras
no campo de texto usando o event.preventDefault(). O event.
preventDefault() é equivalente à declaração do JavaScript nativo return false, que evita a ocorrência do evento padrão.
$('#status').bind({ keypress : function() {
var inputText = $(this).val(); var numChar = inputText.length; var charRemain = numChar -– maxNum; if (numChar <= maxNum) {
$('.counter').text(charRemain); }
else if (numChar > maxNum){ event.preventDefault(); }
}}); });
CAPÍTULO
5
RECENTEMENTE, OS EFEITOS do JavaScript amadureceram em um setor em que o Adobe Flash costumava dominar – o universo de efeitos online. Sites com apresentações de slides de imagens, menus animados ou animações semelhantes a vídeos que costumavam ser feitas exclusivamente em Flash, hoje costumam ser feitas em JavaScript para facilitar a compatibilidade móvel e entre navegadores. Esse aumento no uso dos efeitos do
JavaScript se tornou o motivo principal para Web designers e desenvolvedores Web utilizarem a API de efeitos da jQuery.
A jQuery emprega os efeitos nativos do JavaScript, os quais você já deve conhecer, para fornecer recursos avançados que podem ser facilmente integrados a qualquer site. Como são escritos em jQuery, os efeitos são incrivelmente fáceis de confi gurar, o que faz deles uma opção popular entre Web designers e desenvolvedores Web. Neste capítulo, examino os efeitos disponíveis na API da jQuery, mostro cada efeito e como eles funcionam; depois, analiso detalhadamente algumas situações reais.