javascript - html 输入数字，最小值+步长，让步长忽略最小值？

Question

是否可以让 step 忽略 min 属性？

<input type="number" min="2" step="5"/>

现在，它的步骤如下:2, 7, 12, 17, ...
相反，我希望它是:2, 5, 10, 15, 20, ...

我的真实代码实际上使用了这样的动态值:

<input type="number" [min]="someValue" [step]="someStep"/>

一种解决方法可能是创建一个指令来替换 min 或 step 来做同样的事情而不考虑其他属性。

那么有没有简单的方法来做到这一点？谢谢!

Answer 1

step 考虑了 min 和 max 属性的值。这是默认的浏览器行为，我认为尝试规避它不是一个好主意。

我将添加一个值为 2 的 data-min 属性并将 min 设置为 0。现在可以检查输入值是否小于自定义最小值并在需要时更改值。

因为现在最小值为 0，这意味着浏览器将遵循您想要的 0、5、10、15等

const
  inputElement = document.getElementById('input');
  
function onValueChanged(event) {
  const 
    customMin = parseInt(inputElement.getAttribute('data-min'), 10),
    value = parseInt(inputElement.value);
    
  if (value > customMin) {
    return;
  }
  
  inputElement.value = customMin;
}

inputElement.addEventListener('change', onValueChanged);

<input id="input" type="number" min="0" step="5" data-min="2" value="2"/>