html - <input type ="number"/> with a custom step "n"but allow decimals

Question

我想要一个 <input type="number">有一个没有小数的步骤，但继续允许输入小数，所以该字段不会进入无效状态

<input type="number" step="5.00000" />

按 ^ 将增加 5，但将 5.5 放入该字段将导致无效状态。

更好地理解这里:https://stackblitz.com/edit/angular-89ydzs

Answer 1

解决方法如下:

<input type="number" step="any" />

此外，您还可以使用 javascript 输入您自己的数字。

function inRangeOf(value, min, max) {
  if (min !== undefined) value = Math.max(min, value);
  if (max !== undefined) value = Math.min(max, value);
  return value;
}

function processValue(value, min, max) {
  var dots = value.match(/\./g);
  if (value.length > 1 && value[value.length - 1] == '.' && value[value.length - 2] != '-' && (!dots || dots.length < 2)) {
    return inRangeOf(parseFloat(value.substring(0, value.length-1)), min, max) + '.';
  } else {
    return inRangeOf(parseFloat(value), min, max);
  }
}

function processKey(evt, min, max) {
  if (evt.key == 'ArrowUp') {
    evt.target.value = inRangeOf((parseFloat(evt.target.value) || 0) + 1, min, max) + '';
    return true;
  } else if (evt.key == 'ArrowDown') {
    evt.target.value = inRangeOf((parseFloat(evt.target.value) || 0) - 1, min, max) + '';
    return true;
  }
}

<input type="text" oninput="this.value = processValue(this.value, 0, 100) || ''" onkeydown="return processKey(event, 0, 100)" />