react-numeral-input
之前寫了一個 react-numeral-input，主要是可以所見即所得的處理數字的格式，例如 100000 直接顯示為 100,000。原本的想法是將所有的輸入都轉成數字，然後將輸入的數字加上數字的格式。
不過這樣的作法會造成一個問題，就是當使用者在開啟輸入法時，打的任何值都會被吃掉（看起來像是鍵盤沒用的樣子）。網路上找到的解法大部分都是去做字串取代，但這樣無法解決問題。
input type=”number”
html 的 <input type="number" > 無法顯示非數字，因此在做這個 component 時就知道不能用這個 type 了。
ime-mode: disabled
於是查了一下發現看起來最簡單的方法就是 disable ime-mode，但 ime-mode 只有在 firefox 和 IE 上能動。沒辦法跨瀏覽器。
keycode 229
接著發現當使用者用輸入法輸入時，收到的 keyCode 都是 229，也就是說是可以檢查使用者目前是開啟輸入法的，也可以提醒使用者關閉輸入法已確保正確的輸入。但麻煩的是還要額外提醒使用者的 UI 或者 notice。
User Feedback
轉個念一想，其實問題是在使用者輸入時，沒有對應的 user feedback 給他，才會造成誤解欄位無法輸入的情況，因此保留不正確的格式好像也不是一個問題？
這樣就不需要去考慮輸入法什麼問題，類似這種所見即所得的工具，可以改變使用者的輸入，但要避免讓使用者誤解「輸入 -> 輸出沒反應。」
結論
如此要解決的問題就顯得容易的多，當你在輸入時開啟輸入法，還是可以輸入，但程式不會將你輸入錯的值吃掉，而是返回給試用者，至於是否要顯示 error message，則交給系統自己決定即可。看似簡單的問題，卻繞了一大圈回來才想到解法。
DEMO
有興趣的人可以玩玩看 react-numeral-input，或是直接安裝
|
|