HTML-Texteingabe erlaubt nur numerische Eingaben

Question

Gibt es eine schnelle Möglichkeit, eine HTML-Texteingabe ( <input type=text /> ), um nur numerische Tastenanschläge (plus '.') zuzulassen?

Answer 1

Hier ist eine schöne einfache Lösung, die ich gerne verwende:

function numeric_only (event, input) {
    if ((event.which < 32) || (event.which > 126)) return true; 
    return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;

<input type="text" onkeypress="return numeric_only (event, this);" />

Erläuterung:

Mit "event.which" - zuerst feststellen, ob es ein druckbares Zeichen ist. Ist dies nicht der Fall, dann lassen Sie es zu (für Dinge wie Löschen und Rücktaste). Andernfalls wird das Zeichen an das Ende der Zeichenfolge angehängt und mit der jQuery-Funktion "isNumeric" getestet. Dies nimmt alle der Müdigkeit weg von der Prüfung jedes einzelnen Zeichens und funktioniert auch für Cut / Paste Szenarien.

Wenn Sie es ganz genau nehmen wollen, können Sie einen neuen HTML-Eingabetyp erstellen. Nennen wir ihn "numerisch", damit Sie den Tag haben können:

<input type="numeric" />

die nur numerische Zeichen zulässt. Fügen Sie einfach den folgenden "document.ready"-Befehl hinzu:

$(document).ready (function () {
    $("input[type=numeric]").keypress (function (event) {
        if ((event.which < 32) || (event.which > 126)) return true; 
        return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
    });// numeric.keypress;
});// document.ready;

HTML ist es egal, welchen Namen Sie verwenden - wenn es diesen nicht erkennt, wird standardmäßig ein Textfeld verwendet, so dass Sie dies tun können. Ihr Editor wird sich vielleicht beschweren, aber das ist ja sein Problem. Zweifellos werden Puritaner ausflippen, aber es funktioniert, ist einfach und hat sich bei mir bisher als ziemlich robust erwiesen.

UPDATE

Hier ist ein besserer Weg: Er berücksichtigt die Textauswahl und verwendet natives Javascript:

verify (event) {
    let value = event.target.value;
    let new_value = `${value.substring (0, event.target.selectionStart)}${event.key}${value.substring (event.target.selectionEnd)}`;
    if ((event.code < 32) || (event.code > 126)) return true;
    if (isNaN (parseInt (new_value))) return false;
    return true;
}// verify;

Answer 2

Ich verwende die Bibliothek jquery.inputmask.js, die Sie unter folgender Adresse herunterladen können NuGet . Genauer gesagt verwende ich jquery.inputmask.regex.extensions.js, die mit ihm kommt.

Ich gebe dem Eingabeelement eine Klasse, in diesem Fall reg :

<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>

Und dann habe ich in JavaScript die Maske festgelegt:

var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

Dies gilt nur für Ziffern, aber Sie können den regulären Ausdruck so ändern, dass er auch "." akzeptiert.

Auf diese Weise ist es unmöglich, Zeichen einzugeben, die keine Ziffern sind. Diese Eingabemasken-Bibliotheken sind für die allgemeine Formatierung nützlich.

Answer 3

Ich habe eine ziemlich gute Lösung. Entfernt führende Nullen, setzt die maximale Anzahl von natürlichen und Dezimalstellen, behandelt Copy-Paste, stellt sicher, dass es ein numerischer Wert ist.

this.value = this.value
    .replace(/\b0+/g, '')
    .replace(/[^0-9.]/g, '')
    .replace(/(\..*?)\..*/g, '$1')
    .replace(/([0-9]{0,6}(\.[0-9]{0,2})?).*/g, '$1')

Zuletzt replace legt die Länge der Dezimal- und natürlichen Stellen fest. Ersetzen Sie einfach die Token durch Ihre bevorzugten Werte.

.replace(/([0-9]{0,<max_natural>}(\.[0-9]{0,<max_decimal>})?).*/g, '$1')

Answer 4

Es gibt eine viel einfachere Lösung, die noch niemand erwähnt hat:

inputmode="numeric"

mehr lesen: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

Answer 5

<input type="tel" 
          onkeypress="return onlyNumberKey(event)">

im Skript-Tag

function onlyNumberKey(evt) { 

      // Only ASCII charactar in that range allowed 
      var ASCIICode = (evt.which) ? evt.which : evt.keyCode 
      if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) 
          return false; 
      return true; 
}