> 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/input.md).

# input event

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

{% hint style="success" %}
Elements like <mark style="color:blue;">`<input>`</mark> and <mark style="color:blue;">`<textarea>`</mark>, <mark style="color:yellow;">**fire**</mark> "<mark style="color:purple;">**input**</mark>" <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 %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
Using [**key events**](/web/browser/event/type/key.md) 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 %}
  {% endtab %}

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

* replit ⟩&#x20;

```javascript
// code
```

{% 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) ⟩ [InputEvent](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent)
  {% endtab %}
  {% endtabs %}