> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/type/key.md).

# key event

🚧 under construction

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ key

{% hint style="success" %} <mark style="color:purple;">**keydown**</mark> <mark style="color:yellow;">/</mark> <mark style="color:purple;">**keyup**</mark> – keyboard key is <mark style="color:yellow;">**pressed**</mark> / <mark style="color:yellow;">**released**</mark>.
{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
Despite its name, "<mark style="color:purple;">**keydown**</mark>" fires not only when the key is physically pushed down. When a key is <mark style="color:yellow;">**pressed and**</mark>**&#x20;**<mark style="color:red;">**held**</mark>, the event <mark style="color:yellow;">**fires again**</mark> <mark style="color:red;">**every time**</mark>**&#x20;**<mark style="color:yellow;">**the key**</mark>**&#x20;**<mark style="color:red;">**repeats**</mark>. Be carefull about this:exclamation:
{% endhint %}

{% hint style="danger" %}
Using <mark style="color:purple;">**key events**</mark> to figure out <mark style="color:yellow;">**what is being typed**</mark> is <mark style="color:red;">**problematic**</mark>.&#x20;

* <mark style="color:yellow;">**virtual keyboard**</mark> on Android phones doesn’t fire key events.&#x20;
* <mark style="color:yellow;">**input method editor**</mark> (IME) may use multiple key strokes to create characters.
  {% endhint %}

{% hint style="success" %}
Elements like <mark style="color:blue;">`<input>`</mark> and <mark style="color:blue;">`<textarea>`</mark>, <mark style="color:yellow;">**fire**</mark> "[**input**](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent)" <mark style="color:yellow;">**events**</mark> whenever the user changes their content. To get the actual content that was typed, it is best to <mark style="color:yellow;">**directly read it from the**</mark>**&#x20;**<mark style="color:orange;">**focused field**</mark>. :point\_right: Eloquent JS ⟩ [Form Fields](https://eloquentjavascript.net/18_http.html#forms)
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
The [event.target](/web/browser/event/target.md) of a <mark style="color:purple;">**key event**</mark> is the <mark style="color:yellow;">**element that has**</mark>**&#x20;**<mark style="color:orange;">**focus**</mark> when the key is pressed.&#x20;

* Most nodes <mark style="color:red;">**cannot**</mark>**&#x20;**<mark style="color:yellow;">**have focus**</mark>**&#x20;**<mark style="color:red;">**unless**</mark> you give them a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
* When nothing in particular has focus, <mark style="color:blue;">`document.body`</mark> acts as the [**target**](/web/browser/event/target.md) of key events.
  {% endhint %}

{% hint style="info" %}
The [event.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) property holds a string, for example：&#x20;

* enter：`"Enter"`&#x20;
* shift + "v"： "V"&#x20;
* shift + `"1"`： `"!"`
  {% endhint %}
  {% endtab %}

{% tab title="👥 相關" %}

* [input event](/web/browser/event/type/input.md)
  {% endtab %}

{% tab title="💈範例" %}

* [press shift + space](/web/browser/event/type/key/shift+space.md)
* replit ⟩ [press "v"](https://replit.com/@pegasusroe/press-V-to-change-background#index.js)

```javascript
// onkeydown
window.addEventListener("keydown", event => {
    if (event.key === "v") {
        document.body.style.background = "violet";
    }
});

// onkeyup
window.addEventListener("keyup", event => {
    if (event.key === "v") {
        document.body.style.background = "";
    }
});
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Key Events](https://eloquentjavascript.net/15_event.html#h_974t15Z9oa) ⭐️&#x20;
  {% endtab %}

{% tab title="📘 手冊" %}

* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) ⟩&#x20;
  * [keydown](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) | [keyup](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event)
  * .[key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key), .[code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code), .[altKey](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey), .[ctrlKey](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey), .[metaKey](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey), .[shiftKey](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey), ...
    {% endtab %}
    {% endtabs %}