HTML Type de numéro d'entrée Séparateur de milliers

Je veux avoir un séparateur de milliers (par exemple de 1 000 000) dans mon champ de Saisie. Cependant, il doit être de type nombre parce que j'ai besoin pour être en mesure de régler sa valeur à l'aide de "l'étape". Code:

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

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

source d'informationauteur tije

  1. 3

    Vous pouvez faux cette fonctionnalité à l'aide d'un pseudo-élément pour afficher la virgule version.

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

    Un emballage div est nécessaire 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 à insérer des virgules chaque troisième personnage

    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 la violon

  2. 1

    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;
}
  3. 1
    • Cochez cette webdesign.tutsplus.com tutoriel

    • Résultat Final est résumé ici (regardez direct Codepen aire de jeux)

      $("#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:

    • toLocaleString() fonction javascript Fait de montrer le séparateur de milliers (exemple et doc)

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

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

  4. 0

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

    Mon seul reproche, c'est qu'il force <input type="text"> plutôt que <input type="number">. Cela signifie que vous perdre de la fonctionnalité de stepmais vous gagnez les utilisateurs de votre site d'être en mesure d'utiliser des virgules dans les champs.

    Je suppose que vous pourriez utiliser les valeurs attendues de moins de 1 000 en tant que <input type="number"> et des valeurs de plus de 1 000 en tant que <input type="text">

  5. 0

    À l'aide de autoNumeric plugin, vous pouvez passer d'un champ d'entrée numérique avec différents séparateurs.

    Inclure 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">

    Script:

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

    Vous pouvez uniquement pour le type de numéro, si vous entrez 100000,99 vous verrez 100.000,99.

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