用户体验细化，增强型的 <input type=number>
用户体验细化，增强型的 <input type=number>
作者：Samantha Ming 译者：前端小智 来源：kilianvalkhof
点赞再看，微信搜索【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文
GitHubhttps://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可以让用户快速增加或减少数值，或者精确地锁定一个数字，这取决于用户按的是哪个修改键。