< 返回技术文档列表

Java如何使用增强型的&lt;input type=number&gt;

发布时间:2021-11-07 02:45:57⊙投诉举报

本篇内容主要讲解“Java如何使用增强型的<input type=number>”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java如何使用增强型的<input type=number>”吧!

input 标签的 number  类型提供了一种处理数字的好方法。我们可以使用min和max属性设置界限,并且可以通过向上和向下键来添加或减少1,如果设置step属性,则向上或向下键来添加或减少对应的  step 值。但是,如果我们想让用户以不同的step上下移动,该怎么办?

Java如何使用增强型的<input type=number>

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);

你可能会认为获取值与获取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);

这,就是所有的代码。

到此,相信大家对“Java如何使用增强型的<input type=number>”有了更深的了解,不妨来实际操作一番吧!这里是血鸟云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


/template/Home/Zkeys/PC/Static