乐趣区

关于javascript:用户体验细化增强型的-input-typenumber

jiezi

作者：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。

退出移动版