嚴格數字輸入字段

我有一個類型設置爲數字的簡單輸入字段。這將用於在[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; 
    } 
});

和浮點問題：

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

來源

2016-08-30 akinuri

除了零前綴數字之外的所有要求都可以通過'' –

爲什麼你需要1e？聽起來像是兩個不同的問題。你需要1個輸入，只允許0-255，另一個輸入支持'1e'。但是，我不認爲你會想要一個RGB輸入來接受像'1e'這樣的東西，對吧？ – KevBot

@KevBot如果我想在另一個需要使用指數值的項目中使用這個功能，我會再次面對這個問題。那麼爲什麼現在忽略它呢？ – akinuri

我只是工作在這樣一個問題。這是超級容易做到：

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); 
    } 

});

注意，字段的值可能比事件等方面的變化，如吸paste。所以我會將這些檢查放在一個函數中，validationCheck，併爲每個相關事件運行該函數，包括catchall-onchange。

來源

2016-08-30 18:51:10 cuniculus

開始時可能有多個零。這將需要進一步檢查。 – akinuri

看到編輯 - 添加了一個while循環 – cuniculus

現在它似乎在工作:) – akinuri

您可以使用正則表達式，如：

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

這會爲您提供了一個正整數的前綴沒有零的字符串表示。如果值小於或等於255，則必須使用JavaScript進行測試。

這是JSFiddle。只接受多個零的字符串不被接受。

來源

2016-08-30 19:04:19

我仍然可以添加多個零。我已經添加了一個jsfiddle。你可以測試它。 – akinuri

試試我的JSFiddle，它工作正常。 –

我不知道這是否重要，但我沒有使用表格。我沒有發送任何數據到服務器。這是一個客戶端應用程序。輸入到現場的數據是實時使用的。 – akinuri

嚴格數字輸入字段

回答

相關問題