Question

假设您有一份工作要为用户提供<input>：

<input type="number" min="1" max="11" step="3" value="1"></input>

结果会随着这个序列而增加：1,4,7,10，（13）。

你永远不会在框中看到“13”，因为这个数字超过它允许的最大值（“11”）。您可以在此框中获得的最大值为10.

但是，如果您要向用户显示的最大数字是11，如您的代码中所指定的那样？

预期的序列如下：1,4,7,10,11

如何制作？

感谢。

编辑：
这是问题的demonstration。

Answer 1

step属性尊重max，但也限制输入。如果您需要更多灵活性，请尝试以下方法：

<input list="numbers">

<datalist id="numbers">
  <option value="1">
  <option value="4">
  <option value="7">
  <option value="10">
  <option value="11">
</datalist>

第二个想法，那不是很好 - 我只会使用好的老式选择标签：

  <select>
    <option>1<option>
    <option>4<option>
    <option>7<option>
    <option>10<option>
    <option>11<option>
  </select>

更接近你的榜样。如果您的数据集是为了证明一个点，那么这些替代方法可以像您的示例中那样以编程方式生成。

Answer 2

使用直接HTML5是不可能的。

没有HTML5号码功能增加3秒，并在最后一个号码附近切换到1s。无论我们的需求是什么，HTML都很少偏离既定规则。 step有非常严格的规则，没有类似的HTML5替代品。您必须使用Javascript或<select>下拉列表。

简单不完美的解决方案

您可以使用一些Javascript来实现这一目标。此示例在ready事件中使用jQuery：

$('input').change(function(){
    var $input = $(this), val = $input.val();
    if (val == 13) {
        $input.attr("step","1");
        $input.val(11);
    } else if (val == 10) {
        $input.attr("step","3");
    } else if (val == 12) {
        $input.val(11);
    }
});

演示：http://jsfiddle.net/fpm21ej2/1/

闪烁的数字不正确＆＃34; 13＆＃34;在它变为＆＃34; 11＆＃34;之前。我不知道会阻止这种情况发生的事件，这使得这个解决方案不完善。

更难改善的解决方案

创建自定义文本字段以模仿此递增行为，但使用您的特殊数字序列。这意味着取一个数字框，添加一些向上/向下按钮（可能带有精灵图像），使用Javascript将它们绑定到按预期递增的事件，并验证用户输入无效数字（使用HTML5 {{1} }）。

这可能需要一些工作，而且它需要的时间比我们大多数人可以在StackOverflow上自愿参加。但这应该是可能的。

轻松更好的解决方案

使用pattern下拉列表。

HTML5输入标签：如果max，min，step不相互适合的话

2 个答案: