共计 3624 个字符，预计需要花费 10 分钟才能阅读完成。
作者：Samantha Ming
译者：前端小智
起源：kilianvalkhof
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文
GitHubhttps://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。
