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

ShevaKuilin 发布于2019-08-20 16:54 / 3146人阅读

摘要：前言最近在用封装纯数字的输入框，开发过程中发现不少坑，也有很多值得研究的地方。的值除了影响微调按钮的步长外，还影响表单验证信息。

前言

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

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

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

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

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

HTML5带来的福利-input[type=number]

input[type=number]为我们提供了如下特性：

限制只能输入[+-0-9.]这几个字符

输入法(IME)也无法输入非[+-0-9.]的字符

自动的表单验证

min和max来限制数值的下限和上限;

提供stepUp和stepDown两个方法实现以编程方式控制数值的增加和减少;

移动设备上当它获得焦点时，会出现数字键盘;

step设置点击右侧微调按钮的步长(默认为1)，可设置为小数、整数或any。step的值除了影响微调按钮的步长外，还影响表单验证信息。

另外，设置为any是让表单验证不受精度限制而已，实际上步长依然为1。

遗憾了我的哥

到这里我想大家都会发现怎么少了个精度设置呢？确实，input[type=number]并没有为我们提供设置精度的属性或方法。但遗憾的何止是这个呢？

木有精度精度设置;

不想要右侧的微调按钮还不行了...

点击微调按钮和调用stepUp和stepDown设置数值确实被限制在min和max区间，但直接输入却不受限制...

可以输入多个小数点，如2012.12.12;

设置step=any后，chrome on android的数字键盘居然没了小数点按键。

设置step=any后，点击微调按钮步长为1，但调用stepUp和stepDown则报

Uncaught DOMException: Failed to execute "stepUp" on "HTMLInputElement": This form element does not have an allowed value step.

隐藏右侧微调按钮不完全解决方法

Webkit和Gecko下可通过以下的CSS来隐藏右侧微调按钮

/* chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance: none!important;
    margin: 0;
}
/* Firefox */
input[type=number]{
    -moz-appearance: textfield;
}

IE就没辙了:-(

总结

也许你会问既然HTML5愿意为我们新增一个全新的input[type=number]，为什么偏偏提供一个缺胳膊少腿的呢？只能说得哥情时失嫂意，既然它不满足，那就自己写写看咯:)
尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohn... ^_^肥仔John

云服务器 GPU云服务器 js正则input输入框数字输入框文本框输入数字 jquery_input_type

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83250.html

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

摘要：前言最近在用封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。因此我们要继续补充下面两步，并且由于事件触发时值还没被修改，于是我们需要将值和当前输入值做组合来做预判，进一步扩大非法字符集。前言最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：《动手写个数字输入框1：input[...

microcosm1994 2019-08-21 15:52 评论0 收藏0
动手写个数字输入框2：起手式——拦截非法字符

摘要：前言最近在用封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。因此我们要继续补充下面两步，并且由于事件触发时值还没被修改，于是我们需要将值和当前输入值做组合来做预判，进一步扩大非法字符集。前言最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：《动手写个数字输入框1：input[...

233jl 2019-08-01 16:56 评论0 收藏0
动手写个数字输入框3：痛点——输入法是个魔鬼

摘要：前言最近在用封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。因此我们能做的是通过事件作事后补救措施在中拦截输入法中输入的和按键事件，然后自行出发事件执行补救措施。前言最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历： [《动手写个数字输入框1：input[type=number...

yy13818512006 2019-08-20 17:04 评论0 收藏0