wake-up-neo.com

Eingabemaske für numerisch und dezimal

Nachdem ich mein Programm getestet hatte, stellte ich eine Softwareanwendung für die Verwaltung der Rechnungsstellung vor. Ich habe den folgenden Fehler festgestellt: Meine Tabelle in sqlserver enthält: price numeric (6,2) Der Benutzer meines Programms gibt den Preis als 555.00 ein. Aber wenn er 555555 setzt, ist es ein Fehler. Daher muss ich die Maske angeben, in der die Mantisse optional 0 bis 999 ist und der Dezimalteil je nach Wahl des Benutzers auf 2 oder 3 programmierbar ist. Ich verwende JQuery Masked Input Plugin und ich habe keinen guten regulären Ausdruck gefunden, bitte helfen Sie, ich arbeite mit jsp/servlet.

15
najeh22

Sie können jquery numeric für Zahlen verwenden.
Die aktuelle Version erlaubt das, wonach Sie suchen, aber jemand hat geändert den Code ein wenig und es funktioniert:

HTML

<input class="numeric" type="text" />

Javascript

$(".numeric").numeric({ decimal : ".",  negative : false, scale: 3 });

Dies ist das ganze source .
Und ich habe dieses Geige vorbereitet, damit Sie sehen können, wie es funktioniert.

21
LeftyX

mit dem jQuery-Eingabemasken-Plugin (6 ganze und 2 Dezimalstellen):

HTML:

<input class="mask" type="text" />

jQuery:

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\.\\d{1,2})?$"});

Ich hoffe das hilft jemandem

8
Rick

Sie können dies mit Jquery inputmask plugin tun.

HTML:

<input id="price" type="text">

Javascript:

$('#price').inputmask({alias: 'numeric', 
                       allowMinus: false,  
                       digits: 2, 
                       max: 999.99});
3
Vladimir Vovk

oder auch

<input type="text" onkeypress="handleNumber(event, '€ {-10,3} $')" placeholder="€  $" size=25>

mit

function handleNumber(event, mask) {
    /* numeric mask with pre, post, minus sign, dots and comma as decimal separator
        {}: positive integer
        {10}: positive integer max 10 digit
        {,3}: positive float max 3 decimal
        {10,3}: positive float max 7 digit and 3 decimal
        {null,null}: positive integer
        {10,null}: positive integer max 10 digit
        {null,3}: positive float max 3 decimal
        {-}: positive or negative integer
        {-10}: positive or negative integer max 10 digit
        {-,3}: positive or negative float max 3 decimal
        {-10,3}: positive or negative float max 7 digit and 3 decimal
    */
    with (event) {
        stopPropagation()
        preventDefault()
        if (!charCode) return
        var c = String.fromCharCode(charCode)
        if (c.match(/[^-\d,]/)) return
        with (target) {
            var txt = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
            var pos = selectionStart + 1
        }
    }
    var dot = count(txt, /\./, pos)
    txt = txt.replace(/[^-\d,]/g,'')

    var mask = mask.match(/^(\D*)\{(-)?(\d*|null)?(?:,(\d+|null))?\}(\D*)$/); if (!mask) return // meglio exception?
    var sign = !!mask[2], decimals = +mask[4], integers = Math.max(0, +mask[3] - (decimals || 0))
    if (!txt.match('^' + (!sign?'':'-?') + '\\d*' + (!decimals?'':'(,\\d*)?') + '$')) return

    txt = txt.split(',')
    if (integers && txt[0] && count(txt[0],/\d/) > integers) return
    if (decimals && txt[1] && txt[1].length > decimals) return
    txt[0] = txt[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.')

    with (event.target) {
        value = mask[1] + txt.join(',') + mask[5]
        selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\./, pos) - dot) 
    }

    function count(str, c, e) {
        e = e || str.length
        for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
        return n
    }
}
1
Giacomo

Verwenden Sie die Schleppfunktion, um es zu lösen. Sehr einfach und nützlich:

HTML:

<input class="int-number" type="text" />
<input class="decimal-number" type="text" />

JQuery:

//Integer Number
$(document).on("input", ".int-number", function (e) {
  this.value = this.value.replace(/[^0-9]/g, '');
});

//Decimal Number
$(document).on("input", ".decimal-number", function (e) {
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
});
0
ali abolhasani

Wenn Ihr System auf Englisch ist, verwenden Sie @Rick answer:

Wenn Ihr System auf brasilianischem Portugiesisch ist, verwenden Sie Folgendes:

Importieren:

<script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script     src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

HTML:

<input class="mask" type="text" />

JS:

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\,\\d{1,2})?$"});

Das liegt daran, dass wir im brasilianischen Portugiesisch "1,000,000,00" schreiben und nicht "1,000,000.00" wie in Englisch, wenn Sie also "." Das System versteht keine Dezimalstelle.

Es ist es, ich hoffe, dass es jemandem hilft. Ich verbringe viel Zeit damit, es zu verstehen.

0

Nun, da ich besser verstehe, was Sie brauchen, schlage ich Folgendes vor. Fügen Sie einen Keyup-Handler für Ihr Textfeld hinzu, der den Inhalt des Textfelds mit diesem Regex ^[0-9]{1,14}\.[0-9]{2}$ überprüft. Wenn dies nicht der Fall ist, machen Sie den Hintergrund rot oder zeigen Sie einen Text oder was auch immer Sie möchten. Hier ist der Code für document.ready

$(document).ready(function() {
    $('selectorForTextbox').bind('keyup', function(e) {
        if (e.srcElement.value.match(/^[0-9]{1,14}\.[0-9]{2}$/) === null) {
            $(this).addClass('invalid');
        } else {
            $(this).removeClass('invalid');
        }
    });
});

Hier ist ein JSFiddle davon in Aktion. Machen Sie auch den gleichen Regex-Server, und wenn dies nicht der Fall ist, wurden die Anforderungen nicht erfüllt. Sie können auch das onsubmit -Ereignis überprüfen und den Benutzer nicht zulassen, dass die Seite gesendet wird, wenn der Regex nicht übereinstimmt.

Der Grund dafür, dass die Maske beim Einfügen von Text nicht erzwungen wird, ist, dass sie die Dinge sehr kompliziert macht, z. Wie im Kommentar erwähnt, kann der Benutzer nicht mit der Eingabe der gültigen Eingabe beginnen, da der Beginn der Eingabe nicht gültig ist. Es ist zwar möglich, aber ich schlage das stattdessen vor.

0
Bikonja

Versuchen Sie imask js . Es hat Number, RegEx und andere Masken. Sehr einfach zu erweitern.

0
uNmAnNeR