增强型的 <input type=number>
作者:Samantha Ming 译者:前端小智 来源:kilianvalkhof
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文
GitHub
https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。
input
标签的 number
类型提供了一种处理数字的好方法。 我们可以使用min
和max
属性设置界限,并且可以通过向上和向下键来添加或减少1
,如果设置step
属性,则向上或向下键来添加或减少对应的 step
值。 但是,如果我们想让用户以不同的step
上下移动,该怎么办?
step
不仅决定要添加或删除的数量,还决定了该数字的限制位置。 如果输入的值为5
,step
为10
,然后按向上键,不会得到1
5(5 + 10),而是10
(最接近的 step
倍数)。
那么,我们希望用户可以输入任何数字又想增加10
,要怎么做?
如何增强 input type=number 体验
先来定义一些按键操作。当用户在 input
标签中使用方向键时,有一些对应的快捷操作:
- 如果按的是向上或向下键盘,我们要对应的加减
1
- 如果按的是
shift
并按向上或向下键,我们要对应的加减10
- 如果按的是
alt
并按向上或向下键,我们要对应的加减0.1
- 如果按的是
ctrl
并按向上或向下键,我们要对应的加减100
, Mac 对应的cmd
键 - 如果输入内容为空,则根据
min
值来计算
实现
这是完整的代码,它相对简洁,仅约20
行代码。
const isMac = navigator.platform === 'MacIntel';
const KEY = {
UP: 38,
DOWN: 40,
};
document.querySelector("input").addEventListener("keydown", e => {
if ([KEY.UP, KEY.DOWN].includes(e.keyCode)) {
e.preventDefault();
const currentValue = isNaN(parseFloat(e.target.value))
? parseFloat(e.target.getAttribute("min")) || 0
: parseFloat(e.target.value);
const direction = e.keyCode === KEY.UP ? 1 : -1;
const modifier = (isMac ? e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ? 0.1 : 1;
const decimals = Math.max(
(currentValue.toString().split(".")[1] || "").length,
e.altKey ? 1 : 0
);
const newValue = currentValue + direction * modifier;
e.target.value = newValue.toFixed(decimals);
}
});
这段代码有些部分可能不是很好看懂,我们来逐行看看,表示的含义。
const isMac = navigator.platform === 'MacIntel';
const KEY = {
UP: 38,
DOWN: 40,
};
在 Windows 和 Linux 中,ctrl
是我们想要使用的键,但在 Mac 上更常用的是cmd
。isMac
是一个布尔值,表示是 Mac 还是 Window 系统。
你在键盘上按下的每个键都有一个唯一的键码。向上箭头键是38
向下箭头键是40
。因为我不喜欢代码中的魔法数字,所以我们将它们存储在一个对象中以便以后使用。
document.querySelector('input').addEventListener('keydown', e => {
...
}
然后是监听 input
的 keydown
事件。keydown
可以告诉我们按下哪个键以及按下哪个修饰键的事件。 我们感兴趣的修饰键是shift
,alt
,ctrl
和cmd
。 metaKey
对应是 Mac 上是cmd键,在Windows中是 windows
键。
if ([KEY.UP, KEY.DOWN].includes(e.keyCode)) {
e.preventDefault();
...
}
如果用户是向左或向右键,我们将不执行任何操作。 我们在代码周围添加了一个if
子句,以便仅在用户按向上或向下键盘才执行。 当用户按向上或向下键时,我们调用e.preventDefault()
。 这样可以防止输入内容被更新,因为我们会自己做。
const currentValue = isNaN(parseFloat(e.target.value))
? parseFloat(e.target.getAttribute("min")) || 0
: parseFloat(e.target.value);
w你可能会认为获取值与获取e.target.value
一样容易,但是,我们必须做更多的工作。 e.target.value
始终是一个字符串,即使对于npmber
类型的 input
元素也是如此,因此,要进行任何数学运算,我们都需要将其转换为数字。 因为我们需要能够加/减0.1
,所以我们需要使用浮点数而不是整数。
是,如果输入为空,我们调用parseFloat
,它返回的是一个NaN
值。 由于我们无法添加或减去NaN
,因此我们需要对些时行判断。 如果输入为空,那么我们将获得最小值(如果存在),或者默认为0
。最小值也是一个字符串,因此我们也需要对其进行转换。
如果min
属性未定义,它就变成NaN
,而NaN || 0
解析为0
,所以得到结果是可以计算的。
const direction = e.keyCode === KEY.UP ? 1 : -1;
从if
子句中我们已经知道用户按下的向上或向下的键,所以需要检查用户是按向上还是向下键盘,以便确定是否需要加或减。 我们用变量 “direction” 来保存,如果是向上,值为 1
,向下则为 -1
,之后可以将其与以后的值相乘。
const modifier = (isMac ? e.metaKey : e.ctrlKey) ?
100 :
e.shiftKey ?
10 :
e.altKey ?
0.1 :
1;
我们找出按下了哪个修饰键。 事件属性可以告诉我们。 如果在我们按下的是向上或向下键的同时还按下 shift
或 alt
键,则e.shiftKey
,e.altKey
的值为 true
。
我们首先使用(isMac ? e.metaKey : e.ctrlKey)
来检查meta
键或 ctrl
键,具体取决于我们是否在 Mac上。 如果是这样,我们将相加或相减 100
。 如果改为按Shift
键,则我们用10
加或减,如果按Alt
键,则加0.1
。 如果没有按下这些键,则按“默认”行为加1
或减1
。
const decimals = Math.max( (currentValue.toString().split(".")[1] || "").length, e.altKey ? 1 : 0 );
这里有点棘手,因为我们使用的是浮动。由于四舍五入的关系,JavaScript 中的浮点数可能会产生意想不到的结果。具体来说,如果你加上例如0.1
`和0.2,你得到的值是
0.30000000000000004,大约是
0.3`。
在进行基本计算时,0
的数量太多,但并不重要,在 input
元素中,0.30000000000000004看起来不是很好。我们只要 0.3
。为了达到这个目的,我们需要知道在计算前的小数的最大数量是多少,就是当前输入的小数的数量,或者是按下alt
键时的1
,两者中哪个更大。我们存储这个值以便以后使用。
const newValue = currentValue + direction * modifier;
这是最终的结果值。 我们知道当前值,要增加或减少的数量以及是否需要增加或减少。
我们将modifier
(要添加的数量)与direction
(即+1或-1)相乘,以便在将其添加到当前值时可以相加或相减。
现在我们已经计算了新值,但是由于前面提到的可能很奇怪的四舍五入,我们不能直接将它设置为新值作为输入值,因为它可能有很多小数。相反,我们使用toFixed
与我们之前找到的小数的数目
e.target.value = newValue.toFixed(decimals);
这,就是所有的代码.
这个input
可以让用户快速增加或减少数值,或者精确地锁定一个数字,这取决于用户按的是哪个修改键。
编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://kilianvalkhof.com/202...
交流
文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。
- 通过shell脚本查看procedure的信息(r2笔记85天)
- 支持中文文本数据挖掘的开源项目PyMining
- 通过分区键值发现性能问题(r2笔记84天)
- linux乱码和数据库乱码的问题简单排查(r2笔记83天)
- 一条运行了3天的"简单"的sql(r2笔记82天)
- 海量数据迁移之使用shell启用多个动态并行(r2笔记81天)
- 使用shell测试历史数据样本(r2笔记80天)
- 【专业技术】编译器的工作原理
- ORA-17500 ODM err的问题排查(r2笔记78天)
- 【专业技术】linux启动流程剖析
- 使用dbms_metadata生成建表语句(r2笔记97天)
- 海量数据迁移之使用分区并行切分导入(r2笔记79天)
- 关于oracle session的简单测试(r2笔记95天)
- 使用utl_file走选择性数据导出(r2笔记95天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 前端|动态发光按钮
- Windows系统命令拼接
- 利用Hexo打造属于自己的网页版简历
- RCE远程控制Windows服务器——以win10虚拟机为例
- 解决InnoDB: Table mysql/innodb_index_stats has length mismatch
- R语言中对文本数据进行主题模型topic modeling分析
- QT学习第3天:QSlider使用方法
- qt学习第2天:QRadioButtonTest+ButtonGroup单选后提示消息,QComBox
- Python使用矩阵分解法找到类似的音乐
- SpringBoot集成ELK实现日志收集实践
- python在Scikit-learn中用决策树和随机森林预测NBA获胜者
- R语言:用R语言填补缺失的数据
- R语言如何和何时使用glmnet岭回归
- r语言中对LASSO回归,Ridge岭回归和Elastic Net模型实现
- cmd里如何查看历史命令并执行