javascript-tutorial / javascript-tutorial/en.javascript.info

Keyboard events: keydown filtering example can't block IME-composed input (Korean/Japanese/Chinese)

オープン 初心者向け
#3,978 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
HTML
スター
25.5k
フォーク
4k
PR マージ指標
30日以内にマージされた PR はありません

説明

## Article

[Keyboard: keydown and keyup](https://javascript.info/keyboard-events) — the "Default actions" section, phone-number filter example:

```html

```

## Problem

The example (and the surrounding text) implies that returning `false` from `keydown` reliably prevents unwanted characters from being entered. That holds for direct (Latin) keyboard input, but not for languages typed through an IME (Input Method Editor), such as Korean, Japanese and Chinese.

With an IME active:

- `keydown` fires with `event.key == "Process"` (and `keyCode` 229), not the actual character.
- More importantly, calling `preventDefault()` / returning `false` on that `keydown` does **not** cancel the text insertion, because the character is produced by the IME composition, not by the key's default action.

As a result, Korean/Japanese/Chinese characters pass straight through the filter and appear in the field. This was reported by a Korean reader of the Korean translation (ko.javascript.info), and is easy to reproduce by switching to a Korean IME and typing into the demo.

## Suggestion

Add a short note after the example, along these lines:

> Please note: this filter only works for direct keyboard input. Text composed via an IME (used for languages such as Korean, Japanese or Chinese) is inserted by the input method, not by the key's default action, so it can't be blocked in `keydown`. That's one more reason why, for tracking or validating what actually gets into the field, the `input` event is a better choice.

This ties in nicely with the introduction of the article, which already recommends the `input` event for tracking input from any source.

Happy to send a PR if the note sounds good.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

Keyboard: keydown and keyup の記事を開き、Default actions セクションを確認してください。特に、電話番号フィルターの例と、導入部で説明されている input event について確認します。IME の制限と、挿入されたテキストの追跡や検証には input が適している理由を説明する短い注記を追加し、その後、例に照らして文言を確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
html, javascript
領域
documentation
issue の種類
ドキュメント
難易度
2/5
見積もり時間
1〜3時間
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
76/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。