动手写个数字输入框1:input[type=number]的遗憾
前言
最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历:
- 《动手写个数字输入框1:input[type=number]的遗憾》
- 《动手写个数字输入框2:起手式——拦截非法字符》
- 《动手写个数字输入框3:痛点——输入法是个魔鬼》
- 《动手写个数字输入框4:魔鬼在细节——打磨光标位置》
HTML5带来的福利-input[type=number]
<input
id="age" name="age"
type="number" step="1" min="0" max="120">
<input
id="inc"
type="button" value="增加">
<input
id="dec"
type="button" value="减少">
<script>
/* 工具函数...无视我吧:D */
const comp =
(...fns) =>
(...args) => {
let len = fns.length
while (len--){
args = [fns[len].apply(null, args)]
}
return args.length > 1 ? args : args[0]
}
const isSome = x => 'undefined' !== typeof x && x !== null
const invokerImpl =
n =>
o =>
m =>
(...args) => {
let args4m = args.splice(0, n)
, times = parseInt(args[0]) || 1
, ret = []
while (times--){
ret.push(o[m].apply(o, args4m))
}
return ret.length > 1 ? ret : ret[0]
}
const curry2Partial =
fn =>
(...args) => {
let c = true
, i = 0
, l = args.length
, f = fn
for (;c && i < l; ++i){
c = isSome(args[i])
if (c){
f = f(args[i])
}
}
return f
}
const invoker = curry2Partial(invokerImpl)
const invoker0 = invoker(0)
const $ = invoker(1, document, "querySelectorAll")
const invoker0AtEl = comp(invoker0, $)
/* 继续无视我吧:D */
const invoker0AtAge = invoker0AtEl('#age')
// input[type=number]提供stepUp和stepDown两个方法来增加和减少数字
const incAge = invoker0AtAge('stepUp')
, decAge = invoker0AtAge('stepDown')
$('#inc').addEventListener('click', incAge)
$('#dec').addEventListener('click', decAge)
</script>
input[type=number]
为我们提供了如下特性:
- 限制只能输入
[+-0-9.]
这几个字符 - 输入法(IME)也无法输入非
[+-0-9.]
的字符 - 自动的表单验证
min
和max
来限制数值的下限和上限;- 提供stepUp和stepDown两个方法实现以编程方式控制数值的增加和减少;
- 移动设备上当它获得焦点时,会出现数字键盘;
step
设置点击右侧微调按钮的步长(默认为1),可设置为小数、整数或any
。step
的值除了影响微调按钮的步长外,还影响表单验证信息。
<!-- step为整数时 -->
<input name="age1" type="number"
step="1" value="1">
<input name="age1" type="number"
step="1" value="1.1">
<!-- step为小数时 -->
<input name="age2" type="number"
step="0.1" value="1">
<input name="age2" type="number"
step="0.1" value="1.1">
<input name="age2" type="number"
step="0.1" value="1.11">
<!-- step为any时 -->
<input name="age3" type="number"
step="any" value="1">
<input name="age3" type="number"
step="any" value="1.1">
<input name="age3" type="number"
step="any" value="1.11">
<script>
// 显示 true false
$('[name=age1]').forEach(el => console.log(el.validity.valid))
// 显示 true true false
$('[name=age2]').forEach(el => console.log(el.validity.valid))
// 显示 true true true
$('[name=age3]').forEach(el => console.log(el.validity.valid))
</script>
另外,设置为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/fsjohnhuang/p/6918305.html _肥仔John
动手写个数字输入框1:input[type=number]的遗憾的更多相关文章
- 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)
在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...
- input type = number 去除上下箭头,禁用滚轮事件(默认的自带滚轮加减数字)
<style type="text/css"> /*盒子大小从边框开始计算*/ html * { box-sizing: border-box; } /*解决模态框抖动 ...
- input[type=number]问题
有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...
- 限制input[type=number]的输入位数策略整理
当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...
- 兼容IE7、IE8、IE9的input type="number"插件
IE11版本好像才兼容input type="number",但是现在Win7版本操作系统下,很多人的IE版本都是IE7/8/9,所以为了体验就自己写了一个小插件,支持设置最大值. ...
- input type=number 禁止输入字符“e”的办法
输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...
- 加减号改变input[type=number]的数值,基于[zepto.js]
通过点击加减号可以更改input的数值,样式如下图: 具体的html代码如下: <div class="xh-lxx-cart-count1"> <span cl ...
- 输入类型<input type="number"> / input标签的输入限制
输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...
- 解决 html5 input type='number' 类型可以输入e
当给 input 设置类型为 number 时,比如,我想限制,只能输入 0-9 的正整数,正则表达式如下: /^[-]?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次 用正则测试,小数点 ...
随机推荐
- call和apply的异同
共同点: 作用:调用一个对象的一个方法,以另一个对象替换当前对象.将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 Global 对 ...
- SQL Server 跨库复制表方法小笔记
insert into tableA (column1,column2.....) SELECT * FROM OPENDATASOURCE('SQLOLEDB', 'Data Source=127. ...
- saltstack部署
环境准备 [root@server elasticsearch]# cat /etc/redhat-release CentOS release 6.6 (Final)[root@server ela ...
- 结束C#2的讲解:最后的一些特性
分部类型 可以在多个源文件中为一个类型编写代码.特别适合用于部分代码是自动生成,而其他部分的代码为手动类型. 多个源代码文件组成的类型为分部类型 #region 7-1演示分部类型的混合声明 part ...
- 蓝桥杯-骰子游戏-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 蓝桥杯-买不到的数目-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- input元素之间的融合
将两个input融合在一起,注意input标签之间的空格 .put1{ width: 20px; height: 28px; vertical-align:middle; border: 1px so ...
- java线程(二)
线程范围变量 我们知道线程在cpu上的使用权并不是长时间的,因为计算机的cpu只有一个,而在计算上运行的进程有很多,线程就更不用说了,所以cpu只能通过调度来上多个线程轮流占用cpu资源运行,且为了保 ...
- 二分图的最大匹配——最大流EK算法
序: 既然是个图,并且求边数的最大值.那么这就可以转化为网络流的求最大流问题. 只需要将源点与其中一子集的所有节点相连,汇点与另一子集的所有节点相连,将所有弧的流量限制置为1,那么最大流 == 最大匹 ...
- Spring Boot Dubbo applications.properties 配置清单
摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 与其纠结,不如行动学习.Innovate ,And out execute ! 』 本文 ...