天天看点

动手写个数字输入框1:input[type=number]的遗憾

 最近在用polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历:

《动手写个数字输入框1:input[type=number]的遗憾》

《动手写个数字输入框2:起手式——拦截非法字符》

《动手写个数字输入框3:痛点——输入法是个魔鬼》

《动手写个数字输入框4:魔鬼在细节——打磨光标位置》

动手写个数字输入框1:input[type=number]的遗憾

 <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>,为什么偏偏提供一个缺胳膊少腿的呢?只能说得哥情时失嫂意,既然它不满足,那就自己写写看咯:)

继续阅读