現代瀏覽器的拼字處理
Max Wu @ COSCUP 2017
Max Wu
HackMD Lead
我喜歡好的產品，也開發好的產品；
我寫的不是程式，是理想。
HackMD
您使用 Markdown 寫作與分享知識的最佳方式
Hack
=
用聰明的方法做事
MD
=
Markdown
Markdown
輕量的視覺化標記語言
「wat？」
文字就可以排版的語法
感謝 @clkao 貢獻此麻瓜咒語
誰在用 Markdown？
- GitHub
- Stack Overflow
- Bitbucket
- GitLab
- etc…
HackMD 用途
- 製作筆記
- 撰寫文件
- 快速簡報
- 還有很多意想不到的用法…
功能
- 自動上傳圖片
- 支援嵌入影片
- 支援數學公式
- 支援各式圖表
- 自動修訂紀錄
- 自動作者標記
採用
- PyCon TW 2016
- g0v
- CTF write-ups
- Debater
- jserv 系列課程
- MOPCON 2016
- SITCON 2017
- LaravelConf Taiwan 2017
COSCUP 2017 非官方共筆
文字編輯器
Text Editor
沒錯，就是這個
How?
如何做？從 HTML 基礎開始！
Input tag
- 用於輸入欄位資訊
- 可以選擇欄位類別
- type = text/number/password…
Textarea tag
- 用於輸入文字資訊
- 可以限制文字長度、行數
- 可以做拼字校正等額外屬性
Contenteditable attribute
- HTML5 標準
- 直接讓元素內容可以編輯
- div, span, p 等大部分 tag 均適用
- 對 IME 的支援度高 (中文也沒問題)
- 事件行為與 input tag 相同 (應該)
- 未來的趨勢
但是以上仍不夠滿足編輯器的需求
- 顯示行號
- 自動換行
- 自動完成
- 自訂主題
- 自訂游標
- 需求很多
- 時間很少
看看別人怎麼做？
主流的開源文字編輯器
- CodeMirror
- Ace
CodeMirror
- 支援程式碼語法標色
- 支援各式快速鍵
- 支援手機瀏覽器
CodeMirror 實作方法
輸入的時候有一個隱藏的 textarea 去接輸入事件
(最近加入 div + contenteditable 的輸入選項，仍在開發中)
其餘功能用 div 自幹
連游標也是假的仿造的！
好像很硬派
但是
編輯器都是這樣做成的
VSCode 曾經因為游標閃爍太吃效能被開 Issue
即時協作
Realtime Collaboration
將使用者輸入的內容即時的
同步到其他使用者的編輯器中
就把鍵盤事件傳出去吧！
- keypress
- keydown
- keyup
以上事件裡面有 keyCode 等資訊
一切都看起來很好！
好棒棒
直到 CJK 發起挑戰！
直到膝蓋中了一箭
CJK
中文、日文、韓文
西文只需要拼字
Spell
用字母拼成單字
h + e + l + l + o = hello
CJK 還需要組字
Composition
用文字組成文字
ㄋ + 一 + ˇ = 你
輸入法編輯器
Input Method Editor (IME)
- 用來輸入需要組字的語言
- 但是瀏覽器不認識它
組字的問題
- 按鍵不會觸發 keypress 事件
- 按鍵 keydown 事件 keyCode 都是 229 (Process)
- 按鍵 keyup 事件 是正常的
- 組字事件觸發時取得元素的值會是組字的前一狀態
別擔心
CompositionEvent
來拯救了！
CompositionEvent
- compositionstart: 進入組字模式
- compositionupdate: 組字內容更動 (有新內容、選字等)
- compositionend: 脫離組字模式，有字要從出來了！
CompositionEvent.data
- compositionstart: 即將要被組字模式替換的文字
- compositionupdate: 正在組字的文字
- compositionend: 即將產生的文字
與 Key Events 放在一起看
假設今天要取代 ㄏ 輸入 ㄇ
- keydown: Process (229)
- compositionstart: ㄏ
- compositionupdate: ㄇ
- keyup: a (因為 ㄏ 的按鍵就是 a)
- compositionend: ㄇ
加上 Input & Change Event
假設今天要取代 ㄏ 輸入 ㄇ
- keydown: Process (229)
- compositionstart: ㄏ
- compositionupdate: ㄇ
- input: ㄇ (value)
- keyup: a (因為 ㄏ 的按鍵就是 a)
- compositionend: ㄇ
- change: ㄇ (value)
問：所以到底該怎麼做？
答：請把組字事件也傳出去！
把愛傳出去
所以在使用 HackMD 的時候
其他人也看的到組字過程
目前可以完美的支援所有需組字的語言 
IME 組字的視覺提示
- 正在組字的部分會有底線
- 組字的時候可以移動游標到想要選字的部分 |
- 但是每個 IME 行為可能不同
- 交給原生的輸入框比較合適
組字事件在手機上的行為
- 16 Mar 2015 開的 Issue https://github.com/codemirror/CodeMirror/issues/3137
- 如果有使用 JS 與 editable DOM 互動，組字事件很有可能不會按照順序觸發 (也可能只是 bug)
CodeMirror 已知輸入相關問題
- 組字的時候無法移動游標 (因為不是原生游標)
- 手機上無法長按直接叫出 context menu
- 無法使用原生的拼字檢查 (spellcheck)
Q&A
沒問題可以玩剛剛的玩具
https://codepen.io/jackycute/pen/EvNmWv
謝謝您的聆聽與指教！
這份簡報使用 HackMD 製作
https://hackmd.io/p/HkwdlfewW
參考資料
- http://blog.zhusee.in/post/146553/enhance-ime-support-of-codemirror-with-composition-events
- https://kuro.tw/posts/2016/10/11/筆記-透過-Composition-Events-增強非拉丁語系輸入法對輸入框的支援/
- http://blog.darkthread.net/post-2011-04-26-keypress-event-under-ime.aspx
- https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
- https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
現代瀏覽器的拼字處理 Max Wu @ COSCUP 2017
{"metaMigratedAt":"2023-06-14T14:03:16.585Z","metaMigratedFrom":"YAML","title":"現代瀏覽器的拼字處理 - HackMD @ COSCUP 2017","breaks":true,"lang":"zh-tw","disqus":"hackmd","slideOptions":"{\"transition\":\"fade\",\"theme\":\"white\"}","contributors":"[]"}