数値入力フィールドに入力された値を取得します。解析されません

Question

次のフィールドで入力検証を行い、デフォルト値を設定します。デフォルト値は、フィールドが空の場合に入力フィールドに値を設定したいということです。非常に簡単な方法で

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プロパティがありません。私がこの問題を回避するために考えている方法の1つは、テキスト入力フィールドを使用し、numberに対して追加の検証を行うことです。

数値入力フィールドでこの作業を行う方法はありますか？

Answer 1

指数値を数値に解析する必要があるようです。私は、このソリューションはあなたを助けるべきだと思います

：https://stackoverflow.com/a/18719988/6420563

このソリューションでは、テキストフィールドのために作られたが、私は、それはまた、番号入力のために働くだろうと思います。