作者：Samantha Ming
译者：前端小智
起源：kilianvalkhof
点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。
github 地址：https://github.com/qq44924588...
input 标签的 number 类型提供了一种解决数字的好办法。 咱们能够应用min和max属性设置界线，并且能够通过向上和向下键来增加或缩小1，如果设置step属性，则向上或向下键来增加或缩小对应的 step 值。 然而，如果咱们想让用户以不同的step高低挪动，该怎么办？
step不仅决定要增加或删除的数量，还决定了该数字的限度地位。 如果输出的值为5，step 为10，而后按向上键，不会失去15（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。