web-dev-qa-db-fra.com

Numéro du type d’entrée HTML Mille séparateur

Je souhaite avoir un séparateur de milliers (par exemple, 1 000 000) dans mon champ d'entrée. Cependant, il doit être de type number car je dois pouvoir ajuster sa valeur en utilisant "step". Code:

<input type="number" id='myNumber' value="40,000" step='100'>

J'ai essayé d'utiliser Javascript pour ajuster la valeur, mais cela n'a pas fonctionné. Toute aide serait appréciée. Merci!

javascripthtmlhtml5
28
tije

En utilisant le plugin autoNumeric , vous pouvez créer un champ en entrée numérique avec différents séparateurs.

Inclure le plugin:

<script src="~/Scripts/autoNumeric/autoNumeric.min.js" type="text/javascript"></script>

Html:

 <input type="text" id="DEMO" data-a-sign="" data-a-dec="," data-a-sep="." class="form-control">

Scénario:

<script>
 jQuery(function($) {
$('#DEMO').autoNumeric('init');   
 });
</script>

Vous pouvez taper uniquement le numéro. Si vous entrez 100000,99, vous verrez 100.000,99.

Plus: https://github.com/autoNumeric/autoNumeric

6
Hawlett

csq recommande d'utiliser le plugin jQuery autoNumeric . Je l'ai trouvé très facile et intuitif à utiliser.

Mon seul reproche est que cela oblige <input type="text"> plutôt que <input type="number">. Cela signifie que vous perdez la fonctionnalité de step, mais vous permettez aux utilisateurs de votre site d’utiliser des virgules dans les champs.

Je suppose que vous pouvez utiliser des valeurs attendues inférieures à 1 000 comme <input type="number"> et valant plus de 1 000 comme <input type="text">

1
kurdtpage
  • Vérifiez ceci tutoriel webdesign.tutsplus.com

  • Le résultat final est résumé ici (regardez terrain de jeu Codepen direct )

    $("#formInput".on("keyup", function(event ) {                   
    // When user select text in the document, also abort.
    var selection = window.getSelection().toString(); 
    if (selection !== '') {
        return; 
    }       
    // When the arrow keys are pressed, abort.
    if ($.inArray(event.keyCode, [38, 40, 37, 39]) !== -1) {
        return; 
    }       
    var $this = $(this);            
    // Get the value.
    var input = $this.val();            
    var input = input.replace(/[\D\s\._\ - ] +/g, ""); 
            input = input?parseInt(input, 10):0; 
    $this.val(function () {
                return (input === 0)?"":input.toLocaleString("en-US"); 
    }); 
});

Notes:

  • fonction javascript toLocaleString () Affiche en fait le séparateur de milliers ( exemple et doc )

  • exécuter ci-dessous le code dans votre console pour avoir l'idée

    (30000000) .toLocaleString ('en-US', {useGrouping: true})

1
Iman Abidi

essayer

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? ',' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
1
yovanny olarte

Vous pouvez simuler cette fonctionnalité en utilisant un pseudo-élément pour afficher la version en virgule.

div[comma-value]{
  position:relative;
}
div[comma-value]:before{
  content: attr(comma-value);
  position:absolute;
  left:0;
}
div[comma-value] input{
  color:#fff;
}

Un div d'emballage est requis car les entrées ne peuvent pas avoir de pseudo-éléments.

<div>
  <input type="number" id='myNumber' value="40000" step='100'>
</div>

Et un peu de JavaScript pour insérer des virgules tous les trois caractères

myNumber.value = commify(myNumber.value)
myNumber.addEventListener("change", function(){
  commify(event.target.value)
})

function commify(value){
  var chars = value.split("").reverse()
  var withCommas = []
  for(var i = 1; i <= chars.length; i++ ){
    withCommas.Push(chars[i-1])
    if(i%3==0 && i != chars.length ){  
      withCommas.Push(",")
    }
  }
  var val = withCommas.reverse().join("")
  myNumber.parentNode.setAttribute("comma-value",val)
}

Découvrez le violon

0
jessh