严格的数字输入字段

Question

我有一个类型设置为数字的简单输入字段。这将用于在 [0,255] 范围内输入输入（对于 RGB）。

<input type="number" id="inputBox" min="0" max="255" step="1" />

在其当前形式中，此输入字段将接受以下值：

012   // zero prefixed numbers
1.0   // floating-point
.1    // floating-point
-5    // range underflow
300   // range overflow

我希望它只接受 [0,255] 范围内的整数。所以，没有零前缀，没有浮点数。

我已经使用input 事件解决了范围问题：

inputBox.addEventListener("input", function () {
    if (this.validity.rangeUnderflow) {
        this.value = this.min;
    }
    else if (this.validity.rangeOverflow) {
        this.value = this.max;
    }
});

和使用keydown事件的浮点问题（不允许.）：

inputBox.addEventListener("keydown", function (e) {
    if (!isFloat(this.step)) {
        if (e.key == ".") {
            e.preventDefault();
        }
    }
});

function isFloat(f) {
    var f        = parseFloat(f);
    var floor    = Math.floor(f);
    var fraction = f - floor;
    if (fraction > 0) {
        return true;
    }
    return false;
}

我一直在解决零前缀数字问题。我可以在input 事件中使用以下代码行来删除零前缀

this.value = this.valueAsNumber; // or parseInt(this.value, 10)

这工作正常，但这种破坏了输入字段的功能。我无法使用 E 表示法输入值。就我而言，我不需要，但我可能会在其他地方。只要我输入1e，它就会计算为NaN，并分配回输入字段。

有没有办法让这两者都起作用？

JSFiddle

Answer 1

我刚刚解决了这样一个问题。超级简单：

inputBox.addEventListener("keydown", function (e) {
    if (!isFloat(this.step)) {
        if (e.key == ".") {
            e.preventDefault();
        }
    }
    while ( this.value.toString()[0] === "0" && this.value.length > 0){
       this.value = this.value.toString().slice(1);
    }

});

请注意，该字段的值可能会以keydown 事件以外的方式发生变化，就像paste 一样糟糕。所以我会将这些检查放在一个函数中，validationCheck，并为每个相关事件运行该函数，包括全部 - onchange。

Answer 2

您可以使用正则表达式，例如：

<input type="text" pattern="0|[1-9]\d*">

这将为您提供一个不带前缀零的正整数的字符串表示形式。 然后，您必须使用 JavaScript 测试该值是否小于或等于 255。

这是JSFiddle。 不接受只有多个零的字符串。