Blackbing Playground

[react] react-numeral-input

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。
React-numeral-input_by_blackbing.jpg

User Feedback

轉個念一想,其實問題是在使用者輸入時,沒有對應的 user feedback 給他,才會造成誤解欄位無法輸入的情況,因此保留不正確的格式好像也不是一個問題?
螢幕快照_2015-08-19_下午4_42_28(2).jpg

這樣就不需要去考慮輸入法什麼問題,類似這種所見即所得的工具,可以改變使用者的輸入,但要避免讓使用者誤解「輸入 -> 輸出沒反應。」

結論

如此要解決的問題就顯得容易的多,當你在輸入時開啟輸入法,還是可以輸入,但程式不會將你輸入錯的值吃掉,而是返回給試用者,至於是否要顯示 error message,則交給系統自己決定即可。看似簡單的問題,卻繞了一大圈回來才想到解法。

DEMO

有興趣的人可以玩玩看 react-numeral-input,或是直接安裝

1
npm install react-numeral-input --save-dev