代码之家 › 专栏 › 技术社区 › Luke Vo

我可以让HTML数字输入的箭头跳转不同于其步骤属性吗?

user-experience input html javascript

0

Luke Vo · 技术社区 · 2 年前

我有一个 <input type="number" step="1"> 元素,用于选择字体大小。然而,考虑到在大画布上绘制的上下文,将数字更改为1几乎不明显。如果用户每次点击箭头时可以向上或向下移动5或10步,这将更方便用户。

我仍然需要保留 step 属性设置为1,因为即使使用细粒度值,输入也应保持有效。有没有办法实现这种行为,比如下面的(伪) jump 属性我也对Javascript解决方案持开放态度,但当用户单击箭头时,AFAIK并没有这样的事件。

<input type="number" min="1" max="1000" step="1" jump="5" value="100" />

1 回复 | 直到 2 年前

1

2

Chris G 2 年前

你可以试试这个: 这个 input 事件检查值的变化是否与步长值匹配,并根据跳跃值进行相应调整。

编辑:在这种情况下,为了回答您的评论,我们将使用标志并添加回 keydown 事件

向输入事件侦听器添加一个条件,以防止在手动更改值时出现不必要的行为

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input[type="number"][min="1"][max="1000"][step="1"]');

  const jump = parseInt(input.getAttribute('jump'), 10);
  let previousValue = parseInt(input.value, 10);
  let isManualChange = false;

  input.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
      event.preventDefault();
      const currentValue = parseInt(input.value, 10);

      if (event.key === 'ArrowUp') {
        input.value = currentValue + jump;
      } else if (event.key === 'ArrowDown') {
        input.value = currentValue - jump;
      }

      previousValue = parseInt(input.value, 10);
      isManualChange = false;
    } else {
      isManualChange = true;
    }
  });

  input.addEventListener('input', (event) => {
    const currentValue = parseInt(input.value, 10);
    const step = parseInt(input.getAttribute('step'), 10);

    if (!isManualChange && Math.abs(currentValue - previousValue) === step) {
      if (currentValue > previousValue) {
        input.value = previousValue + jump;
      } else {
        input.value = previousValue - jump;
      }
    }

    previousValue = parseInt(input.value, 10);
  });
});

<input type="number" min="1" max="1000" step="1" jump="5" value="100" />