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/docker">Docker</a> </div> <div class="white-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="white-news__text"> Para matar um recipiente do docker, primeiro, escolha um contêiner em particular que precisa ser mor... </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/sqlite">Sqlite</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/can-i-use-sqlite-online">Posso usar o sqlite online?</a> </div> <div class="white-news__text"> Sim, você pode usar o SQLite online através do aplicativo Web SQLITE Viewer, Extend Class ou APPSCMS... </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/c-sharp">C nítido</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-throw-keyword-in-c">Como usar a palavra -chave Throw em C#</a> </div> <div class="white-news__text"> A palavra -chave Throw é como uma declaração de salto em C# que pode aumentar uma exceção. Exceções ... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/orlando-green">Orlando Green</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/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/matplotlib-bold-text">Texto em negrito de matplotlib</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</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/what-is-system-io-namespace-in-c">O que é sistema.Namespace io em c#</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/r">R</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-create-an-empty-data-frame-r">Como criar um quadro de dados vazio r</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-aws-tools-and-devops-are-needed-to-develop-a-web-app">Quais são as ferramentas e o DevOps da AWS para desenvolver um aplicativo da web?</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-the-difference-between-aws-batch-and-lambda">Qual é a diferença entre o lote da AWS e Lambda?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/benny-hilll-dds">Benny Hilll DDS</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-check-typescript-version">Como verificar a versão do TypeScript</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/ed-treutel-iv">Ed Treutel IV</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-write-output-cmdlet-in-powershell">Como usar o cmdlet Write-Output no PowerShell?</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> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/ms-sql-server">MS SQL Server</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-mysql-rdbms-a-comprehensive-guide">O que é MySQL RDBMS um guia abrangente</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</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-does-docker-differ-from-docker-desktop">Como o Docker difere do desktop do Docker?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/shaun-bogan">Shaun Bogan</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>