web-dev-qa-db-fra.com

Masque de saisie numérique et décimal

J'ai réalisé une facturation de gestion d'applications logicielles après avoir testé mon programme. J'ai remarqué l'erreur suivante: Mon tableau dans sqlserver contient: price numeric (6,2) L'utilisateur de mon programme entre price car 555.00 est bon. mais quand il a mis 555555 c'est une erreur, donc je dois spécifier le masque où la mantisse est facultative de 0 à 999 et la partie décimale est programmable 2 ou 3 selon le choix de l'utilisateur, j'utilise le plugin d'entrée JQuery Mask et je n'ai pas trouvé de bonne expression régulière, s'il vous plaît, aidez-moi, je travaille avec jsp/servlet.

javascriptjqueryhtmlregexinput-mask
15
najeh22

Vous pouvez utiliser jquery numeric pour les nombres.
La version actuelle permet ce que vous recherchez mais quelqu'un a modifié le code un peu et cela fonctionne:

HTML

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

Javascript

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

Ceci est l'ensemble source .
.__ Et j'ai préparé ce violon afin que vous puissiez voir comment ça marche.

21
LeftyX

utilisation du plug-in de masque de saisie jQuery (6 décimales et 2 décimales):

HTML:

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

jQuery:

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

J'espère que ça aidera quelqu'un

8
Rick

Vous pouvez le faire en utilisant jquery inputmask plugin.

HTML:

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

Javascript:

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

ou aussi

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

avec

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

Utilisez la fonction de remorquage pour le résoudre, très simple et utile:

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

Maintenant que je comprends mieux ce dont vous avez besoin, voici ce que je propose. Ajoutez un gestionnaire keyup pour votre zone de texte qui vérifie le contenu de la zone de texte avec cette expression regex ^[0-9]{1,14}\.[0-9]{2}$. S'il ne correspond pas, rendez l'arrière-plan rouge ou affichez un texte ou tout autre texte de votre choix. Voici le code à mettre dans 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');
        }
    });
});

Voici un JSFiddle de ceci en action. Faites également la même chose côté serveur regex et si cela ne correspond pas, les conditions requises ne sont pas remplies. Vous pouvez également effectuer cette vérification de l'événement onsubmit et ne pas laisser l'utilisateur soumettre la page si l'expression régulière ne correspond pas.

La raison pour laquelle le masque n’est pas appliqué lors de l’insertion de texte est que cela complique beaucoup les choses, par exemple. comme je l'ai mentionné dans le commentaire, l'utilisateur ne peut pas commencer à saisir l'entrée valide car son début n'est pas valide. C'est possible cependant, mais je suggère plutôt cela.

0
Bikonja

Essayez imask js . Il a un numéro, un RegEx et d'autres masques. Très simple à étendre.

0
uNmAnNeR