Question

我有一个数字输入，需要的范围从1000到某个任意最大值，但也需要零作为有效输入。接近非连续可能输入范围的最佳方法是什么？

一种hack-y的方法可能是将范围从最大值设置为零，并将任何范围从1-999设置为1000.也许有一种方法可以使它从0开始，当它从0开始时，它转到1000，如果你从1000下来，它会直接跳到0。

我不认为在输入旁边有一个'零'复选框是一个可行的解决方案，该值需要由输入本身处理。

问题的另一个要求是值0应该显示文本'none'而不是数字。我的第一种方法是使用角度格式化器，但我很想知道是否有更简单的解决方案。

非常感谢任何建议。谢谢！

Answer 1

您可以在输入元素上使用pattern属性。

＆＃13;

:valid { background: #cfc; }
:invalid { background: #fcc; }

＆＃13;

<input pattern='0|\d{4,}' required>

＆＃13;

此模式匹配零字符，以及4位或更大的任何数字（因此≥1,000）。我还提出了required属性，因为您可能希望提交一个值。 CSS用于风格目的，因此您可以看到什么是可接受的，什么不是。

如果您需要特定的最大值（即10的偶数幂），那么您可以简单地将该功率放在正则表达式的第二部分中。对于任何其他数字（比如2,000），这会变得有点棘手。

编辑：这是一个仅限JS的解决方案，涉及操作数字输入的min属性。

＆＃13;

:valid { background: #cfc; }
:invalid { background: #fcc; }

＆＃13;

<input
  type='number'
  oninput='setAttribute("min", value == 0 ? 0 : 1000)'
  min='0'
  max='86400000'
  required
>

＆＃13;

当然，如果您在许多地方使用它，您应该将其提取到一个正确的函数，该函数将被传递参数this（有问题的输入）。它只是检查输入是否正好为零，并适当地更改min值。如果它不为零，则必须介于1000和86,400,000之间。

Answer 2

我没有看到您的角度版本，并且标记为angular和angularjs。

我假设你使用的是 Angular2 + （被称为angular）。

您可以使用以下HTML：

<input  type="number" min="0" max="999999" [step]="step" placeholder="none" [ngModel]="value" (ngModelChange)="changeValue($event)">

以及在组件中处理它的代码：

public value: number;
public step = 1000;

public changeValue(newValue: number) {
    newValue = newValue || 0;

    if ((0 < newValue) && (newValue < 1000)) {
        if (newValue < this.value) {
            newValue = null;
        } else {
            newValue = 1000;
        }
    }

    newValue = newValue || null;        

    if ((!newValue) || (newValue != this.value)) {
        if ((!newValue) && (this.value === null)) {
            // to trigger changes
            newValue = undefined;
        }

        this.value = newValue;
        this.step = this.value ? 1 : 1000;
    }
}

您可以在一个根据有效值更改值的函数中处理它。

如果没有值，则步骤为1000;如果值为1或加号，则为1000。

我的做法是价值不是0，而是null / undefined，所以我可以代替占位符none值0。

非连续HTML输入

2 个答案: