Question

我希望有一个<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

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)" />

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

1 个答案: