動手寫個數字輸入框1：input[type=number]的遺憾

 最近在用polymer封裝純數字的輸入框，開發過程中發現不少坑，也有很多值得研究的地方。本系列打算分4篇來叙述這段可歌可泣的踩坑經曆：

《動手寫個數字輸入框1：input[type=number]的遺憾》

《動手寫個數字輸入框2：起手式——攔截非法字元》

《動手寫個數字輸入框3：痛點——輸入法是個魔鬼》

《動手寫個數字輸入框4：魔鬼在細節——打磨光标位置》

 <code>input[type=number]</code>為我們提供了如下特性：

限制隻能輸入<code>[+-0-9.]</code>這幾個字元

輸入法(ime)也無法輸入非<code>[+-0-9.]</code>的字元

自動的表單驗證

<code>min</code>和<code>max</code>來限制數值的下限和上限;

提供stepup和stepdown兩個方法實作以程式設計方式控制數值的增加和減少;

移動裝置上當它獲得焦點時，會出現數字鍵盤;

<code>step</code>設定點選右側微調按鈕的步長(預設為1)，可設定為小數、整數或<code>any</code>。<code>step</code>的值除了影響微調按鈕的步長外，還影響表單驗證資訊。

另外，設定為any是讓表單驗證不受精度限制而已，實際上步長依然為1。

 到這裡我想大家都會發現怎麼少了個精度設定呢？确實，<code>input[type=number]</code>并沒有為我們提供設定精度的屬性或方法。但遺憾的何止是這個呢？

木有精度精度設定;

不想要右側的微調按鈕還不行了...

點選微調按鈕和調用<code>stepup</code>和<code>stepdown</code>設定數值确實被限制在<code>min</code>和<code>max</code>區間，但直接輸入卻不受限制...

可以輸入多個小數點，如<code>2012.12.12</code>;

設定<code>step=any</code>後，chrome on android的數字鍵盤居然沒了小數點按鍵。

設定<code>step=any</code>後，點選微調按鈕步長為1，但調用<code>stepup</code>和<code>stepdown</code>則報

webkit和gecko下可通過以下的css來隐藏右側微調按鈕

ie就沒轍了:-(

 也許你會問既然html5願意為我們新增一個全新的<code>input[type=number]</code>，為什麼偏偏提供一個缺胳膊少腿的呢？隻能說得哥情時失嫂意，既然它不滿足，那就自己寫寫看咯:)