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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: keydown
slug: Web/API/Document/keydown_event
translation_of: Web/API/Document/keydown_event
---
<p>O evento <code>keydown</code> é disparado quando uma tecla é pressionada. Diferente do evento <code><a href="/en-US/docs/Web/Events/keypress">keypress</a></code>, o <code>keydown</code> é disparado para teclas que produzem e que não produzem um caractere.</p>
<h2 id="Informações_gerais">Informações gerais</h2>
<dl>
<dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
<dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></dd>
<dt style="float: left; text-align: right; width: 120px;">Interface</dt>
<dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
<dt style="float: left; text-align: right; width: 120px;">Burbulha</dt>
<dd style="margin: 0 0 0 120px;">Sim</dd>
<dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
<dd style="margin: 0 0 0 120px;">Sim</dd>
<dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
<dd style="margin: 0 0 0 120px;">Document, Element</dd>
<dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
<dd style="margin: 0 0 0 120px;">Variações: evento <code>keypress</code>; carrega sistema de composição de texto; eventos <code>blur</code> e <code>focus</code>; evento <code>DOMActivate</code>; outro evento</dd>
</dl>
<h2 id="Propriedades">Propriedades</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Propriedade</th>
<th scope="col">Tipo</th>
<th scope="col">Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>EventTarget</td>
<td>O alvo do evento (o alvo de nível mais alto na árvore DOM).</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>DOMString</td>
<td>O tipo do evento.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>Boolean</td>
<td>Se o evento normalmente burbulha ou não</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td>Boolean</td>
<td>Se o evento é cancelável ou não</td>
</tr>
<tr>
<td><code>view</code> {{readonlyInline}}</td>
<td>WindowProxy</td>
<td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> do documento)</td>
</tr>
<tr>
<td><code>detail</code> {{readonlyInline}}</td>
<td><code>long</code> (<code>float</code>)</td>
<td>0.</td>
</tr>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>EventTarget (elemento DOM)</td>
<td>Elemento focado processando o evento, elemento raiz se nenhum elemento input adequado está focado.</td>
</tr>
<tr>
<td><code>char</code> {{readonlyInline}}</td>
<td>DOMString (string)</td>
<td>O caractere correspondente à tecla. Se a tecla corresponde a um caractere imprimível, este valor é uma string Unicode não vazia, contendo o caractere. Se a tecla não tem uma representação imprimível, o valor é uma string vazia. Veja <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> para detalhes.
<div class="note"><strong>Nota:</strong> Se a tecla for usada como uma macro que insere múltiplos caracteres, o valor deste atributo é toda a string, não apenas o primeiro caractere.</div>
</td>
</tr>
<tr>
<td><code>key</code> {{readonlyInline}}</td>
<td>DOMString (string)</td>
<td>O valor da tecla pressionada. Se a tecla tem uma representação imprimível, o valor deste atributo é o mesmo do atributo <code>char</code>. Caso contrário, é uma das strings key especificadas em <a href="/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">Key Values</a>. Se a tecla não pode ser identificada, o valor do atributo é a string "Unidentified". Veja <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> para detalhes. Somente Leitura.</td>
</tr>
<tr>
<td><code>code</code> {{readonlyInline}}</td>
<td>DOMString (string)</td>
<td>Mantém uma string que identifica a tecla física sendo pressionada. O valor não é afetado pelo layout atual do teclado ou estado de modificador, portando uma tecla particular sempre retornará o mesmo valor. </td>
</tr>
<tr>
<td><code>charCode</code> {{readonlyInline}}</td>
<td>Unsigned long (int)</td>
<td>O número de referência Unicode da tecla; este atributo é usado somente pelo evento <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a>. Para teclas cujo atributo <code>char</code> contém múltiplos caracteres, este é o valor Unicode do primeiro caractere daquele atributo.
<div class="warning"><strong>Aviso:</strong> Este atributo está obsoleto; você deve usar <code>char</code> no lugar, se disponível.</div>
</td>
</tr>
<tr>
<td><code>keyCode</code> {{readonlyInline}}</td>
<td>Unsigned long (int)</td>
<td>Um código numérico, dependente do sistema e da implementação, identificando o valor não modificado da tecla pressionada. Este é usualmente o código decimal ASCII ({{ RFC(20) }}) ou código Windows 1252 correspondente à tecla; veja {{ anch("Virtual key codes") }} para uma lista de valores comuns. Se a tecla não pode ser identificada, este valor é 0.
<div class="warning"><strong>Aviso:</strong> Este atributo está obsoleto; você deve usar <code>key</code> no lugar, se disponível.</div>
</td>
</tr>
<tr>
<td><code>which</code> {{readonlyInline}}</td>
<td>Unsigned long (int)</td>
<td>Um código numérico, dependente do sistema e da implementação, identificando o valor não modificado da tecla pressionada; este é usualmente o mesmo que <code>keyCode</code>.
<div class="warning"><strong>Aviso:</strong> Este atributo está obsoleto; você deve usar <code>key</code> no lugar, se disponível.</div>
</td>
</tr>
<tr>
<td><code>location</code> {{readonlyInline}}</td>
<td>long (float)</td>
<td>A localização da tecla no dispositivo.</td>
</tr>
<tr>
<td><code>repeat</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> se a tecla foi pressionada tempo suficiente para disparar repetição de tecla, <code>false</code> caso contrário.</td>
</tr>
<tr>
<td><code>locale</code> {{readonlyInline}}</td>
<td>string</td>
<td>O código do idioma para o evento, se disponível; uma string vazia caso contrário.</td>
</tr>
<tr>
<td><code>ctrlKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> se a tecla control estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
</tr>
<tr>
<td><code>shiftKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> se a tecla shift estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
</tr>
<tr>
<td><code>altKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> se a tecla alt estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
</tr>
<tr>
<td><code>metaKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> se a tecla meta estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
</tr>
</tbody>
</table>
<h2 id="preventDefault()_do_evento_keydown"><code>preventDefault()</code> do evento <code>keydown</code></h2>
<p>Iniciando com o Gecko 25, uma chamada para o método <code>preventDefault()</code> do evento <code>keydown</code> evita dispachar o evento <code>keypress</code> seguinte. Este é um comportamento válido para a especificação D3E e os principais navegadores web se comportam desta forma. Por outro lado, o Gecko 24 e anteriores dispachavam o evento <code>keypress</code> mesmo que o método <code>preventDefault()</code> do evento <code>keydown</code> anterior fosse chamado, embora o atributo <code>defaultPrevented</code> do evento <code>keypress</code> fosse <code>true</code> neste caso.</p>
<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
<ul>
<li>{{event("keydown")}}</li>
<li>{{event("keyup")}}</li>
<li>{{event("keypress")}}</li>
<li>{{event("input")}}</li>
</ul>
<h2 id="Exemplo">Exemplo</h2>
<pre><!DOCTYPE html>
<html>
<head>
<script>
'use strict';
document.addEventListener('keydown', (event) => {
const keyName = event.key;
alert('keydown event\n\n' + 'key: ' + keyName);
});
</script>
</head>
<body>
</body>
</html></pre>
|
