4
votes

Masquage d'entrée pour la devise indienne Dans le champ de saisie dynamique Jquery

Je souhaite afficher le masquage selon la devise indienne lors de l'écriture dans la zone de saisie.

J'utilise InputMask jquery pour le masquage: https://github.com/RobinHerbots/Inputmask

Je veux que chaque fois que les utilisateurs essaient d'écrire le montant dans la saisie de texte, il devrait ajouter une virgule automatique selon le format de la devise indienne .

J'essaie d'y parvenir en utilisant le code suivant.

<input type="text" name="amount" class="amount_field"/>
$('.amount_field').inputmask("numeric", {
            radixPoint: ".",
            groupSeparator: ",",
            digits: 3,
            autoGroup: true,
            prefix: '',
            rightAlign: false,
            allowMinus: false,
            // oncleared: function () { self.Value(''); }
        });

Sortie actuelle: 2,500,000

Résultats nécessaires: 25,00 000

Selon la devise indienne, j'avais besoin du coma d'abord après 3, puis avant 2.

Toute aide sera appréciée.

javascript jquery input masking

3 commentaires

Quel plugin utilisez-vous? Veuillez ajouter un lien dans la question qui détaille la fonction inputmask () .

Cela peut éclairer github.com/RobinHerbots/Inputmask/issues/866#event -272466579

@ techie_28 merci oui cela résolvait un problème.

4 Réponses :

0
votes

var number = document.getElementsByClassName("amount_field")[0].value;
number.toLocaleString('en-IN');

2 commentaires

je recherche le masquage dynamique, pas le statique. ressemble à ca. codepen.io/anon/pen/exNJwj mais pour la monnaie indienne.

Veuillez expliquer votre réponse. Les réponses au code uniquement ne sont pas toujours utiles aux apprenants. Utilisez le bouton modifier pour ajouter du texte plus utile.

1
votes

J'avais créé le mien. J'espère que cela vous sera utile aussi.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="amount" class="amount_field" id="amount_field" value="123456789" />
<input type="text" name="amount" class="amount_field" id="amount_field2" value="987654321" />

<div id="result"></div>
<div id="result1"></div>

$(document).ready(function() {
  $(".amount_field, amount_field2").keyup(function() {
    convertToINRFormat($(this).val(),$(this));
  });
  convertToINRFormat($("#amount_field").val(),$("#amount_field"));
  convertToINRFormat($("#amount_field2").val(),$("#amount_field2"));
});

function convertToINRFormat(value, inputField) {
  var number = Number(value.replace(/,/g, ""));
  // India uses thousands/lakh/crore separators
  $('#result').html(number.toLocaleString('en-IN'));

  $('#result1').html(number.toLocaleString('en-IN', {
    maximumFractionDigits: 2,
    style: 'currency',
    currency: 'INR'
  }));

  $(inputField).val(number.toLocaleString('en-IN'));
}

4 commentaires

Je vous remercie de répondre. Mais que faire si le champ de texte est en mode édition. signifie que l'utilisateur a une valeur pré-remplie. le format doit être affiché dans un format correct et le masquage doit fonctionner.

que se passe-t-il si plus d'un champ d'entrée avec la même classe avec une valeur préremplie.? veuillez ne pas utiliser pour chacun pour cela. besoin d'écrire plusieurs fois cette fonction ???

Non, vous n'avez pas besoin d'écrire cette fonction plusieurs fois et aucune boucle ne sera requise

Oui c'est vrai. J'ai apprécié votre réponse. mais je cherchais une règle de masquage exacte, pas pour le flou jquery, le keyup ou tout autre événement.

0
votes

J'ai résolu ce problème avec l'événement on change:

<input type="text" name="masknumber" id="masknumber" onchange="return changeData(this.value);">
<script type="text/javascript">
function changeData(x){
    alert(x);
    x=x.toString();
    var lastThree = x.substring(x.length-3);
    var otherNumbers = x.substring(0,x.length-3);
    if(otherNumbers != '')
    lastThree = ',' + lastThree;
    var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") +  lastThree;
    document.getElementById('masknumber').value = res;
}
</script>

0 commentaires

3
votes

J'ai implémenté votre problème avec un simple suivi, vous pouvez essayer cela.

Remarque: La dernière version du style InputMask Indian Currency a été ajoutée. Consultez la dernière version ici. : https://github.com/RobinHerbots/Inputmask/commit/5586f25853e96102417888b2cfc2823f3caa9763 p>

<input type="text" class="inputmasking" value=""/>
<input type="text" class="inputmasking" value=""/>
<input type="text" class="inputmasking" value=""/>

<script type="text/javascript">
Inputmask("(,99){*|1}(,999){1|1}",
     {
         positionCaretOnClick: "radixFocus",
         _radixDance: true,
         radixPoint: ".",
         numericInput: true,
         placeholder: "0"
     }
 ).mask(".inputmasking");
</script>

Exemple de travail de violon: https://jsfiddle.net/mayanksdudakiya/58pnxjvw/

0 commentaires