Javascript 注音輸入跟事件綁定注意事項

說明

在設計或使用注音輸入法時，需特別注意其與英文字母輸入的差異。英文輸入通常是一鍵對應一字母，而注音輸入則需多鍵組合才能輸出一個完整的音節。若未妥善處理這種組合輸入的情境，可能導致輸入錯誤或使用體驗不佳。

情境

我在使用組件 Chips 時，發生打注音按 Enter 會沒有清掉輸入的內容，正常打英文會清掉，這是因為打注音最終會需要按 Enter，這與 Chips 綁定 Enter 點擊事件互相重疊，這意味著注音打完按 Enter 確認時，Chips 觸發一次事件，那次 Chips 清掉輸入框的內容後，我輸入的注音字才寫入到輸入框。

解決辦法

可以判斷如果還在組合注音輸入時，也就是還沒最後按 Enter 送出注音時，跳過 Chips Enter 點擊事件。

最終程式碼大概會是如下：

example.tsx

import { Chips } from 'primereact/chips';
import { useRef, useState } from 'react';

export default function Example() {
  // Chips 的 input 元素
  const chipsInputRef = useRef<HTMLInputElement>(null);

  // 是否正在輸入組合文字，例如注音
  const [isComposing, setIsComposing] = useState(false);

  chipsInputRef.current?.addEventListener('compositionstart', () => {
    setIsComposing(true);
  });

  chipsInputRef.current?.addEventListener('compositionend', () => {
    setIsComposing(false);
  });

  function handleChipsKeydown(event: React.KeyboardEvent<HTMLInputElement>) {
    // 如果正在輸入組合文字，則不處理 Enter 鍵
    if (event.key === 'Enter' && isComposing) {
      event.preventDefault();

      return;
    }
  }

  return (
    <Chips
      inputRef={chipsInputRef}
      onKeyDown={handleChipsKeydown}
    />
  );
}

compositionstart: 組合注音剛開始事件。
compositionend: 組合注音結束事件。

參考

• Element: compositionend event
• Element: compositionstart event
• Element: compositionupdate event