Chrome

Firefox

大家都知道的 key event

在 browser 中，當按下鍵盤時會觸發三個事件

• keydown
• keyup
• keypress

keydown & keyup

The keydown event is fired when a key is pressed.

The keydown and keyup events provide a code
indicating which key is pressed.

Keydown v.s keypress ?

MDN:

keypress イベントとは異なり、 
keydown イベントはすべてのキーにおいて、
文字が入力されるかどうかにかかわらず発生します。

では、問題です。

「はい」を入力するとき、「h」を押すと、
keypressは発火する？しない？

実験しよう

A:
発火しない

bugについての推論

おそらくこちらのイベント処理がちゃんと処理されてないから、
keydownなどで混乱しちゃって、
バグになった

MDN:

Firefox 65 から、
keydown および keyup イベントは IME 入力中でも発生するようになり、
CJKT のユーザーのブラウザー間の互換性が向上しました (バグ 354358)。 

Input method editor (インプットメソッドエディター)

インプットメソッドエディター (IME) は、
テキスト入力のための特殊なユーザーインターフェイスを提供するプログラムです。
インプットメソッドエディターは多くの場面で使用されています。

Reactのソースコードを見ましょう

react/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js

Composition start

/**
 * Does our fallback best-guess model think this event signifies that
 * composition has begun?
 */
function isFallbackCompositionStart(
  domEventName: DOMEventName,
  nativeEvent: any,
): boolean {
  return domEventName === 'keydown' && nativeEvent.keyCode === START_KEYCODE;
}

START_KEYCODE = 229

If an Input Method Editor is processing key input
and the event is keydown,
return 229.

keyCode in key events

react/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js

Composition end

/**
 * Does our fallback mode think that this event is the end of composition?
 */
function isFallbackCompositionEnd(
  domEventName: DOMEventName,
  nativeEvent: any,
): boolean {
  switch (domEventName) {
    case 'keyup':
      // Command keys insert or clear IME input.
      return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
      // const END_KEYCODES = [9, 13, 27, 32];
      // Tab, Return, Esc, Space
      
    case 'keydown':
      // Expect IME keyCode on each keydown. If we get any other
      // code we must have exited earlier.
      return nativeEvent.keyCode !== START_KEYCODE;
    case 'keypress':
    case 'mousedown':
    case 'focusout':
      // Events are not possible without cancelling IME.
      return true;
    default:
      return false;
  }
}

Composition Events:
https://codepen.io/keronscribe/pen/PoErpwm

この**列挙属性**には、次の値を設定できます。

'true' は、要素の内容が編集可能 (contenteditable) であることを示します。
'false' は、要素が編集できないことを示します。
'inherit' は、要素がその親の編集可能状態を継承することを示します。

content editable を使っている editor

• GitHub も使っている　CodeMirror
• このスライドを作成する環境のHackMD
• 最近ちょっと話題になってるlexical

lexical Rich text editor は本当に綺麗と思います。