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中，并为每个相关事件运行该函数，包括catchall- onchange。

Answer 2

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

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

这将为您提供正整数的字符串表示，不带前缀零。如果值小于或等于255，则必须使用JavaScript进行测试。

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

严格的数字输入字段

2 个答案: