Strict Nummer Eingabefeld

Question

Ich habe ein einfaches Eingabefeld mit Typ auf Nummer festgelegt. Dies wird verwendet, um eine Eingabe im Bereich [0,255] (für RGB) einzugeben.

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

In seiner jetzigen Form wird dieses Eingabefeld die folgenden Werte annehmen:

012 // zero prefixed numbers 
1.0 // floating-point 
.1 // floating-point 
-5 // range underflow 
300 // range overflow 

ich nur die ganzen Zahlen im Bereich von [0255] annehmen möchten. Also, kein Null-Präfix, keine Fließkommazahlen.

inputBox.addEventListener("input", function() { 
    if (this.validity.rangeUnderflow) { 
     this.value = this.min; 
    } 
    else if (this.validity.rangeOverflow) { 
     this.value = this.max; 
    } 
}); 

und Floating-Point-Problem mit keydown Ereignisse (durch nicht erlaubt .): bei der Lösung

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

Ich bin fest

Ich habe den Bereich Problem mit input Ereignisse gelöst das Null-Präfix-Zahlenproblem. Ich kann die folgende Codezeile in dem input Ereignisse verwendet Null-Präfix

this.value = this.valueAsNumber; // or parseInt(this.value, 10) 

zu entfernen, die fein funktionieren, aber diese Art von Pausen des Funktionalität des Eingabefeldes. Ich kann keine Werte mit der Notation E eingeben. In meinem Fall brauche ich das nicht, aber ich könnte woanders hin. Sobald ich 1e eingib, wird NaN ausgewertet und es wird dem Eingabefeld zugewiesen.

Gibt es eine Möglichkeit, diese beiden zu arbeiten?

JSFiddle

Answer 1

Ich arbeitete gerade an einem Problem wie dieses. Es ist super einfach zu tun:

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

}); 

Beachten Sie, dass der Wert des Feldes auf andere Weise als keydown Ereignisse ändern könnte, saugen wie paste. Also würde ich diese Überprüfungen in eine Funktion setzen, validationCheck, und diese Funktion für jedes relevante Ereignis ausführen, einschließlich der Catchall-onchange.

Answer 2

Sie können einen regulären Ausdruck verwenden, wie zum Beispiel:

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

Dies werden Ihnen eine String-Darstellung einer positiven ganzen Zahl ohne Präfix Nullen gibt. Sie müssen dann mit JavaScript testen, wenn der Wert kleiner oder gleich 255 ist.

Hier ist ein JSFiddle. String mit nur mehreren Nullen werden nicht akzeptiert.