Eventos de teclado JavaScript

Evan Mueller

As interações entre HTML e JavaScript são definidas por eventos. Desde carregar uma página até pressionar qualquer tecla ou redimensionar uma janela etc, todos são considerados eventos. Os eventos JavaScript estão incluídos no HTML DOM versão 2 e versão 3. Há uma vasta categoria de eventos JavaScript que pode acontecer manipulando uma página da web através de um usuário ou o navegador, no entanto, neste artigo, estaremos falando especificamente sobre eventos que acontecem usando um teclado.

Os eventos que acontecem quando uma tecla de teclado é pressionada são referidos como eventos de teclado JavaScript e estes fazem parte do objeto KeyboardEvent. Os eventos que se enquadram na categoria de eventos de teclado são:

Evento onkeydown
Evento OnKeyPress
evento de onkeyup

Aqui vamos lançar luz sobre esses eventos acima mencionados em detalhes.

Evento onkeydown

Quando uma tecla do teclado está sendo pressionada, o evento OnKeydown acontece. Ele borbulha e também é cancelável. Este evento suporta todas as tags html que não sejam , ,
, , , , , , , , e estão incluídos na versão 2 do DOM.</p> <p><strong>Sintaxe</strong><br>A sintaxe do evento OneKeydown é a seguinte</p> <p><strong>Sintaxe HTML</strong><br> </p> <p><strong>Sintaxe JavaScript</strong><br>objeto.onKeyDown = function () script;</p> <p><strong>Javascript addEventListener () sintaxe</strong><br>objeto.addEventListener ("keydown", script); </p> <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>alert("You just pressed a key while inside the input field!");<br><br></script><br></body><br></html> <p>No exemplo acima, um campo de entrada foi criado. Enquanto estiver dentro do campo de entrada, quando o usuário pressiona uma tecla de teclado, o evento OnKeydown acionará e a cor de fundo do campo de entrada será alterada para rosa.</p> <p>Saída</p> <p>Antes de pressionar uma tecla do teclado.</p> <p>Depois de pressionar uma tecla do teclado dentro do campo de entrada.</p> <p>Evento OnKeyPress</p> <p>Quando uma tecla de teclado está sendo pressionada, o evento Onkeypress acontece. Ele borbulha e também é cancelável. Este evento suporta todas as tags html que não sejam , , <br>, , , <iframe>, , , , , e estão incluídos na versão 2 do DOM.</p> <p><strong>Sintaxe</strong><br>A sintaxe do evento OneKeyPress é a seguinte</p> <p><strong>Sintaxe HTML</strong><br> </p> <p><strong>Sintaxe JavaScript</strong><br>objeto.onKeypress = function () script;</p> <p><strong>Javascript addEventListener () sintaxe</strong><br>objeto.addEventListener ("KeyPress", script); </p> <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>document.getElementById("tutorial").style.backgroundColor = "pink";<br><br></script><br></body><br></html> <p>No exemplo acima, um campo de entrada está sendo criado. Quando um usuário pressiona uma tecla de teclado enquanto estiver dentro do campo de entrada, o evento OnkeyPress acontecerá e a cor de fundo do campo de entrada será alterada para rosa.</p> <p><strong>Saída</strong><br>Antes de pressionar uma tecla.</p> <p>Depois de pressionar uma tecla do teclado, a cor do fundo do campo de entrada muda para rosa.</p> <p>evento de onkeyup</p> <p>Quando uma chave de teclado é lançada, o evento OnkeyUp acontece. Ele borbulha e também é cancelável. Este evento suporta todas as tags html que não sejam , , <br>, , , <iframe>, , , , , e estão incluídos na versão 2 do DOM.</p> <p><strong>Sintaxe</strong><br>A sintaxe do evento OneKeyUps é a seguinte</p> <p><strong>Sintaxe HTML</strong><br> </p> <p><strong>Sintaxe JavaScript</strong><br>objeto.onkeyup = function () script;</p> <p><strong>Javascript addEventListener () sintaxe</strong><br>objeto.addEventListener ("keyUp", script); </p> <p>Exemplo</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function keydownFunction() <br>document.getElementById("tutorial").style.backgroundColor = "pink";<br><br>function keyupFunction() <br>document.getElementById("tutorial").style.backgroundColor = "yellow";<br><br></script><br></body><br></html> <p>No exemplo acima, os eventos onkeydown e onkeyup são demonstrados. Um campo de entrada está sendo criado. Quando você pressiona uma tecla, o evento OnKekeDown é acionado e a cor do fundo do campo de entrada se transforma em rosa e, quando você liberar uma chave, o evento OnkeyUp será acionado e a cor do fundo se tornará amarela.</p> <p><strong>Saída</strong><br>Quando o usuário pressiona uma tecla no campo de entrada.</p> <p>Depois de lançar a chave.</p> <p>Conclusão</p> <p>Os eventos que ocorrem devido à pressão de um botão do teclado são chamados de eventos de mouse javascript. Eventos que são classificados na categoria de eventos de teclado JavaScript são o evento OnKeyDown, Onkeypress Event, OnKeyUp Event. Todos esses eventos têm propósitos diferentes e são discutidos em detalhes, juntamente com exemplos apropriados, neste artigo.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pt.cyberaxe.org/article/java-math-class-methods--explained-with-examples">« Métodos de classe de matemática Java | Explicado com exemplos</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pt.cyberaxe.org/article/javascript-object-accessors">Acessores de objetos JavaScript »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/what-are-packages-in-golang">O que são pacotes em Golang?</a> </div> <div class="white-news__text"> Um pacote é uma técnica de agrupamento de código em busca em pedaços reutilizáveis e gerenciáveis.... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/mr-warren-cummerata">Mr. Warren Cummerata</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/salesforce">Força de vendas</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/salesforce-apex---string-class">Salesforce Apex - Classe de String</a> </div> <div class="white-news__text"> Tutorial prático sobre a classe Salesforce Apex String e como aplicar seus métodos em strings simple... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/bash-programming">Programação Bash</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-count-number-of-lines-in-terminal-output-in-bash">Como contar o número de linhas na saída do terminal em bash</a> </div> <div class="white-news__text"> O número de linhas na saída do terminal pode ser contado usando os comandos WC, Grep e Awk em Bash.... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-mouseevent-pagey-property">Como usar a propriedade Mouseevent Pagey?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/evan-mueller">Evan Mueller</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-inheritance-in-golang">O que é herança em Golang</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/bryant-rowe-sr">Bryant Rowe Sr.</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/a-comparison-between-cloudtrail-and-guardduty">Uma comparação entre CloudTrail e Guardduty</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/mr-warren-cummerata">Mr. Warren Cummerata</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-the-move-item-cmdlet-in-powershell">Como usar o cmdlet de movimento em PowerShell?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/pedro-macejkovic">Pedro Macejkovic</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-kill-a-docker-container">Como matar um recipiente do documento?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/mr-warren-cummerata">Mr. Warren Cummerata</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-set-variable-command-in-powershell">Como usar o comando Set-Variable no PowerShell</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/bryant-rowe-sr">Bryant Rowe Sr.</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">Como usar o cmdlet de objeto de classificação em PowerShell</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/bryant-rowe-sr">Bryant Rowe Sr.</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/difference-between--and--operators-in-c">Diferença entre+= e =+operadores em c ++</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/pedro-macejkovic">Pedro Macejkovic</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/c-sharp">C nítido</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-lambda-operator--is-used-in-c">Como o operador lambda '=>' é usado em C#</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/tommie-konopelski">Tommie Konopelski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-php-strsplit-function">Como usar a função php str_split</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/jackie-blanda">Jackie Blanda</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Um site sobre o sistema operacional Linux. Aqui você encontrará muitos artigos interessantes e guias úteis</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/python">Pitão</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/postgresql">PostGresql</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c-sharp">C nítido</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a></li> </li> <li class="menu-item"><a href="http://pt.cyberaxe.org/all-categories"><b>Todas as categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>