<input type =“ number” />,带有自定义步骤“ n”,但允许小数

时间:2019-08-07 08:41:37

标签: html input numbers decimal

我希望有一个<input type="number" step="5.00000" /> ,其步长不带小数,但是要保持允许输入小数,因此该字段不会处于无效状态

<div class="item"><%= link_to category.name , categories_show_path(category: category.name) %></div> 

^ 将增加5,但是将5.5放入字段将导致无效状态。

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

1 个答案:

答案 0 :(得分: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)" />