Em cenários como validação e verificação de dados, o estilo dos elementos do campo é alterado sempre que uma única tecla pressionada é liberada pelo usuário no teclado. Essa mudança de estilo em relação a cada pressionamento ou liberação de tecla é realizada por meio de manipuladores de eventos fornecidos pelo jQuery. Para ser mais específico, o manipulador de eventos ou método que lida ou invoca a função quando qualquer tecla pressionada é liberada é o “ teclar ()” método.
Por outro lado, o método que trata ou invoca a tecla de função pressionada é o “ tecla pressionada ()” e você pode verificar nosso associado artigo para este evento.
Neste blog, forneceremos uma breve descrição do método jQuery keyup().
Como usar o método jQuery keyup()?
O jQuery “ teclar ()” aciona a função anônima sempre que o usuário para de pressionar ou inserir as teclas dentro do campo selecionado. Este método também é usado para aplicar estilo dinâmico ao elemento selecionado em tempo real.
Sintaxe
A sintaxe usada para o método jQuery keyup() é a seguinte:
$ ( 'esse' ) . teclar ( customFunc )
Na sintaxe acima, “ esse ”é o elemento HTML selecionado e“ customFunc ”É uma função executada pelo“ teclar ”Método sobre o“ esse ”.
Vejamos alguns exemplos para uma compreensão mais profunda.
Exemplo 1: Alterando a cor do texto usando o método “keyup()”
Neste caso, a cor do texto inserido será alterada para uma cor diferente quando o usuário soltar a tecla já pressionada conforme mostrado abaixo:
< HTML >
< cabeça >
< roteiro fonte = 'https://code.jquery.com/jquery-3.7.0.js' >< / roteiro >
< roteiro >
$(documento).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('cor', 'florestaverde');
});
});
< / roteiro >
< / cabeça >
< corpo >
< divisão >
Insira os dados do Linuxhint: < entrada eu ia = 'demonstração' tipo = 'texto' / >
< / divisão >
< / corpo >
< / HTML >
A descrição do código acima é mencionada abaixo:
- Primeiro, importe o jQuery para o projeto inserindo seu CDN online visitando este link de documentação oficial.
- A seguir, crie uma função anônima que será chamada quando o “ documento ”Ou a página é carregada. Esta função seleciona o elemento HTML com um id “demo” e anexa o “ teclar ()” com ele.
- O ' teclar ()” invoca a função de retorno de chamada que usa o “ css ()” para definir a cor da fonte do texto como “ verde floresta ”.
- Agora, crie o “< entrada >” elemento dentro do “< corpo >” e atribua a ela um id de “ demonstração ”.
Pré-visualização da página web após a conclusão do processo de compilação:
A saída mostra que a cor do texto muda quando a tecla selecionada é liberada.
Exemplo 2: Alterando a cor de fundo dinamicamente
Neste exemplo, diferentes cores de fundo serão definidas para o elemento HTML selecionado sempre que o usuário deixar a tecla pressionada. Vamos dar uma olhada no código deste cenário:
< cabeça >< roteiro fonte = 'https://code.jquery.com/jquery-3.7.0.js' >< / roteiro >
< roteiro >
deixe o fundoShades = [ 'água-marinha' , 'laranja' , 'cadete azul' , 'verde floresta' ,
'cinza claro' , 'marrom arenoso' , 'magenta' , 'Madeira robusta' ] ;
deixe j = 0 ;
$ ( documento ) .keyup ( função ( evento ) {
$ ( '#hgg' ) .css ( 'cor de fundo' , fundoSombras [ j ] ) ;
j++;
j = % 9 ;
} ) ;
< / roteiro >
< / cabeça >
< corpo >
< h1 estilo = 'cor: verde mar' >Artigo Linuxhint< / h1 >< br >
< divisão eu ia = 'hgg' estilo = 'preenchimento: 10px' >
< h2 > jQuery keyup usado para definir diferente Fundo cada vez que a chave é liberada.< / h2 >
< br / >
< / divisão >
< / corpo >
Descrição do código acima:
- Inicialmente, importe o jQuery em seu projeto adicionando jQuery CDN dentro de “< cabeça >” etiqueta.
- Em seguida, crie um array chamado “ fundoShades ”que contém oito cores aleatórias.
- A seguir, o “ teclar ()” método está anexado ao “ documento ”E invoca uma função de retorno de chamada anônima. Esta função seleciona o elemento HTML com um id de “ hgg ”E aplica o CSS“ cor de fundo ' propriedade.
- A matriz “ fundoShades ”É passado como o valor para as propriedades CSS e o índice é definido como“ j ' variável. Esta variável é incrementada em um a cada vez e reinicia a partir do “ 0 ”índice quando o valor atinge“ 8 ”. Porque o índice máximo na matriz é “ 7 ”.
- Depois disso, crie um “ divisão ”elemento com um id de“ hgg ”, a cor de fundo deste elemento será alterada quando a tecla pressionada for liberada.
Pré-visualização da página web após a compilação:
A saída confirma que a cor de fundo do elemento HTML selecionado muda cada vez que a tecla pressionada ou selecionada é liberada. Isso é tudo uma questão de usar o “ teclar ()” método.
Conclusão
O jQuery “ teclar ()” aciona uma função de retorno de chamada no elemento HTML selecionado quando a tecla pressionada é liberada. Este método não chama quando a tecla está sendo pressionada, mas no momento de soltar ou ao pressionar a tecla esta função executa uma função de retorno de chamada. Este blog explicou o uso e funcionamento do método jQuery keyup().