React 解決中文輸入法

今天在開發晶晶體產生器的時候,發現中文輸入總是有問題,這時候我想起以前看過 Hackmd 官方的一篇 blog,提到中文輸入法如果有問題,可能和組字事件有關。於是就開始研究。首先我將以下設定加入 textarea 裡觀察組字事件的行為 onCompositionStart={(e) => console.log('compositionStart', e.data)} onCompositionEnd={(e) => console.log('compositionEnd', e.data)} onCompositionUpdate={(e) => console.log('compositionUpdate', e.data)} 當我打「今天我想要吃蛋餅」的時候,console 長這樣 compositionStart <empty string> compositionUpdate ㄐ compositionUpdate ㄐㄧ compositionUpdate ㄐㄧㄣ compositionUpdate 今 compositionUpdate 今ㄊ compositionUpdate 今ㄊㄧ compositionUpdate 今ㄊㄧㄢ compositionUpdate 今天 compositionUpdate 今天ㄨ compositionUpdate 今天ㄨㄛ compositionUpdate 今天ㄒㄨㄛ compositionUpdate 今天ㄒㄨ compositionUpdate 今天ㄒ compositionUpdate 今天 compositionUpdate 今天ㄨ compositionUpdate 今天ㄨㄛ compositionUpdate 今天我 compositionUpdate 今天我ㄒ compositionUpdate 今天我ㄒㄧ compositionUpdate 今天我ㄒㄧㄤ compositionUpdate 今天我想 compositionUpdate 今天我想ㄧ compositionUpdate 今天我想ㄧㄠ compositionUpdate 今天我想要 compositionUpdate 今天我想要ㄔ compositionUpdate 今天我想要吃 compositionUpdate 今天我想要吃ㄉ compositionUpdate 今天我想要吃ㄉㄢ compositionUpdate 今天我想要吃但 compositionUpdate 今天我想要吃但ㄅ compositionUpdate 今天我想要吃但ㄅㄧ compositionUpdate 今天我想要吃但ㄅㄧㄥ compositionUpdate 今天我想要吃蛋餅 compositionUpdate <empty string> compositionEnd <empty string> 根據實驗結果,我猜我們可以用 onCompositionUpdate 事件來修正,於是現在 textarea 變成這樣...

2022-February-5 · 1 分鐘 · simbafs

HTML form button

HTML 的 form 裡的按鈕預設是 submit 所以要加上 type="button" 它才不會太心急送出表單 按鈕的 css 「按下」 selector 好像可已用 :active、:focus 但是我兩個失敗了

2020-June-1 · 1 分鐘 · simbafs

meta-tag

今天為了幫 Let’s Remind Daniel 做 SEO 在 免費資源網路社群 找到了一個工具可以直接生成 還有一個可以測試的工具 連結 生成 測試

2020-March-28 · 1 分鐘 · simbafs

firefox-event-listener-breakpoint

問題 最近在用 jquery 但是不知道為什麼每次 debugger 都會跳出一個通知 很煩 解決 後來尋線發現原來是 firefox 好心的 debugger 在 DOM 發生改變的時候通知我 在 裡面 Debugger 頁籤左下有個拉頁叫「Event Listener Breakpoints」 把裡面的東西都點掉就好了 就是那個 DOM Mutation 心得 我原本還以為是 jquery 的問題 原來是好心的 firefox 啊

2020-March-25 · 1 分鐘 · simbafs

jquery

今天寫 jquery 遇到了一些坑 1. submit .submit() 是要加在 form 上而不是 submit button 上 2. this 在 jquery 裡有時後會用到 handler 正常情況下可以用 arrow function 但是如果用到 this 就不能用 arrow function 了 (這不只是 jquery, JS 都是這樣)

2020-March-15 · 1 分鐘 · simbafs