厳密な数値入力フィールド

Question

私はnumber型に設定された単純な入力フィールドを持っています。これは[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 

が、私はそれが[0255]の範囲の整数のみを受け入れるようにしたいです。したがって、ゼロ接頭辞はなく、浮動小数点数はありません。 （.を許可しないことによって）​​イベントを使用して

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) 

が、休憩のこの種の入力フィールドの機能を削除するinputイベントに次のコード行を使用することができます。 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); 
    } 

}); 

注フィールドの値が​​イベント、pasteとして吸う以外の方法で変更される可能性がありますことを。だから、私はこれらのチェックを関数validationCheckに入れ、catchall-onchangeを含む関連イベントごとにその関数を実行します。

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

この意志はあなたに接頭辞ゼロのない正の整数の文字列表現を与える：

Answer 2

は、次のような正規表現を使用することができます。 これで、値が255以下の場合はJavaScriptでテストする必要があります。

ここにはJSFiddleがあります。 複数のゼロのみを含む文字列は受け入れられません。