我希望有一个<input type="number" step="5.00000" />
,其步长不带小数,但是要保持允许输入小数,因此该字段不会处于无效状态
<div class="item"><%= link_to category.name , categories_show_path(category: category.name) %></div>
按 ^ 将增加5,但是将5.5放入字段将导致无效状态。
答案 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)" />