獲取數字輸入字段的輸入值，而不是解析

我正在對下列字段進行輸入驗證，我想設置一個默認值。我的意思是默認值是我想爲輸入字段設置一些值，如果該字段爲空。獲取數字輸入字段的輸入值，而不是解析

var inputBox = document.getElementById("inputBox"); 
 

 
inputBox.addEventListener("input", function() { 
 
    validateInput(this); 
 
}); 
 

 
inputBox.addEventListener("keydown", function(e) { 
 
    validateInput(this, e); 
 
}); 
 

 
function validateInput(elm, e) { 
 
    // handle keydown event 
 
    if (e) { 
 
    // do not allow floating-point numbers, if it's not expected 
 
    if (!isFloat(elm.step)) { 
 
     if (e.key == ".") { 
 
     e.preventDefault(); 
 
     } 
 
    } 
 
    } 
 
    // handle input event 
 
    else { 
 
    // do not allow leading zeros 
 
    while (elm.value.length > 1 && elm.value[0] === "0") { 
 
     elm.value = elm.value.toString().slice(1); 
 
    } 
 
    // input should be between min and max 
 
    if (elm.validity.rangeUnderflow) { 
 
     elm.value = elm.min; 
 
    } else if (elm.validity.rangeOverflow) { 
 
     elm.value = elm.max; 
 
    } 
 
    } 
 
} 
 

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

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

在一個非常簡單的方法，我可以添加以下的validateInput()

// set default value, empty field isn't allowed 
if (elm.value == "") { 
    elm.value = elm.min; 
}

結束，但是這打破了一些功能。例如，我不能輸入指數值（例如1e+5）。

輸入字段在輸入時會自行檢查。在輸入1e的那一刻，其評估爲NaN，並且元素的value屬性設置爲""，但在視覺上，1e仍然在該字段中輸入。所以，你看，輸入的值和HTMLInputElement.value可能會有所不同。

爲了能夠設置默認值，我應該能夠檢查輸入的值，而不是元素的解析值。像這樣的東西可能會工作：

// set default value, empty field isn't allowed 
if (elm.value == "" && !elm.stringValue.includes(e)) { 
    elm.value = elm.min; 
}

當然但是，有沒有這樣的stringValue財產。我可以想到解決此問題的一種方法是使用文本輸入字段並對數字進行額外的驗證。

有沒有辦法使這項工作與數字輸入字段？

來源

2016-08-31 akinuri

看起來你需要將指數值解析爲數字。

我認爲，這個解決方案應該可以幫助您：https://stackoverflow.com/a/18719988/6420563

該解決方案爲文本字段做，但我認爲它會爲數字輸入工作。

來源

2016-08-31 21:55:59 Vadim

類型設置爲數字的輸入元素使用正則表達式自動驗證輸入。確保它是一個數字。如果它通過驗證，則輸入存儲在'value'屬性中，並且解析的值存儲在'valueAsNumber'屬性中。我無法檢查每個輸入的值是否爲指數，因爲只要輸入'1e'，它將不會通過驗證，將評估爲'NaN'，並且'value'將被設置爲' 「」'。我無法得到實際輸入的值。 – akinuri

您必須在示例中描述的轉換後驗證值。之後你可以覆蓋值，如果需要的話。 – Vadim

獲取數字輸入字段的輸入值，而不是解析

回答

相關問題