本文转载自微信公众号“大千世界”，转载请联系大千世界公众号。输入标签的数字类型提供了一种处理数字的好方法。我们可以通过min和max属性来设置上下限，可以通过上下键加减1，如果设置了step属性，可以通过上下键加减相应的步长值下键。但是，如果我们希望用户以不同的步骤上下移动怎么办？步骤不仅确定要添加或删除多少，而且还确定该数字的界限。如果您输入值5，步长10，然后按向上键，您不会得到15(5+10)，而是10（步长的最接近倍数）。那么，我们想让用户可以输入任意数字，想要增加10，怎么办呢？如何提升输入type=number的体验？我们先定义一些按钮操作。当用户在输入标签中使用方向键时，有一些相应的快捷键：如果用户按下向上或向下键盘，我们需要加或减1；如果他按shift，按up或down键，我们需要对应的加减为10。如果我们按alt，按up或down键，我们需要相应的加减0.1。如果我们在按住ctrl的同时按上下键，就需要相应的加减100。mac对应cmd键，如果输入内容为空，则按照min值进行计算。这是完整的代码，比较简洁，只有20行左右的代码。constMac=navigator.platform==='MacIntel';constKEY={UP:38,DOWN:40,};document.querySelector("input").addEventListener("keydown",e=>{if([KEY.UP,KEY.DOWN].includes(e.keyCode)){e.preventDefault();constcurrentValue=isNaN(parseFloat(e.target.value))?parseFloat(e.target.getAttribute("min"))||0:parseFloat(e.target.value);constdirection=e.keyCode===KEY.UP?1:-1;constmodifier=(isMac?e.metaKey:e.ctrlKey)?100:e.shiftKey?10:e.altKey?0.1:1;constdecimals=Math.max((currentValue.toString().split(".")[1]||"").length,e.altKey?1:0);constnewValue=currentValue+方向*修饰符；e.target.value=newValue.toFixed(小数)；}});这段代码有些部分可能不太好理解，我们一行一行看一下，理解其中的意思。constisMac=navigator.platform==='MacIntel';constKEY={UP:38,DOWN:40,};在Windows和Linux中，ctrl是我们要使用的键，但在Mac上更常见的是使用cmd。isMac是一个布尔值，表示是Mac系统还是Windows系统。您在键盘上按下的每个键都有一个唯一的键码。向上箭头键是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()。这可以防止输入被更新，因为我们会自己做。constcurrentValue=isNaN(parseFloat(e.target.value))?parseFloat(e.target.getAttribute("min"))||0:parseFloat(e.target.value);你可能认为获取值和获取e.target.value一样简单，但是，我们还需要做更多的工作。target.value始终是一个字符串，即使对于npmber类型的输入元素，所以要进行任何数学运算，我们需要将其转换为数字。因为我们需要能够加/减0.1，所以我们需要使用浮点数而不是整数。是的，如果输入为空，我们调用parseFloat，它返回一个NaN值。由于我们不能添加或减去NaN，因此我们需要检查一段时间。如果输入为空，那么我们将获得最小值（如果存在），或者默认为0。最小值也是一个字符串，所以我们也需要转换它。如果min属性未定义，则变为NaN，而NaN||0解析为0，所以可以计算出结果。constdirection=e.keyCode===KEY.UP?1:-1;从if子句中，我们已经知道用户按下的是向上键还是向下键，所以我们需要检查用户是否按下了向上键以及向下键来判断是否需要加法或减法。我们使用变量“direction”来保存值1（如果向上）和-1（如果向下），然后我们可以将它与未来的值相乘。constmodifier=(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)来检查元键或ctrl键，这取决于我们是否在Mac上。如果是，我们加或减100。如果我们按Shift键，我们加或减10，如果我们按Alt键，我们加0.1。如果没有按下这些键，则按“默认”行为递增或递减1。constdecimals=Math.max((currentValue.toString().split(".")1||"").length,e.altKey?1:0);这里有点棘手，因为我们使用的是浮点数。由于四舍五入，JavaScript中的浮点数可能会产生意想不到的结果。具体来说，如果您添加例如0.1``和0.2，你得到的值是0.30000000000000004，大约是0.3。做基本计算的时候0的个数太多了，不过没关系，0.3000000000000000004在一个输入元素里看起来不太好。我们只需要0.3。为此，我们需要在计算前知道最大小数位数是多少，也就是当前输入的小数位数，或者按下alt键时的1，取大者。我们存储此值供以后使用。constnewValue=当前值+方向*修饰符；这是最终的结果值。我们知道当前值，增加或减少的数量，以及是否需要增加或减少。我们将修饰符（要添加的数量）与方向（即+1或-1）相乘，以便我们可以在将其添加到当前值时进行添加或减去。现在我们已经计算出新值，但是由于前面提到的可能很奇怪的舍入，我们不能将它设置为新值作为输入值，因为它可能有很多小数。相反，我们将toFixed与我们之前找到的小数位数一起使用e.target.value=newValue.toFixed(decimals);这就是所有的代码。此输入允许用户快速增加或减少一个值，或精确锁定一个数字，具体取决于用户按下的修改键。原文：https://kilianvalkhof.com/2020/javascript/supercharging-input-type-number/
