Numero di tipo di input HTML Mille separatori

Question

Desidero avere un separatore di migliaia (ad esempio 1.000.000) nel campo Input. Tuttavia, deve essere di tipo numero perché devo essere in grado di regolare il suo valore usando "step". Codice:

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

Ho provato a utilizzare Javascript per regolare il valore ma non ha funzionato. Qualsiasi aiuto sarebbe apprezzato. Grazie!

Answer 1

È possibile simulare questa funzionalità utilizzando uno pseudo-elemento per visualizzare la versione della virgola.

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 wrapping è necessario perché gli input non possono avere pseudo elementi.

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

E un po 'di JavaScript da inserire virgole ogni terzo personaggio

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) 
} 

Scopri i fiddle

Answer 2

provare

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; 
} 

Answer 3

csq consiglia di utilizzare il jQuery autoNumeric plugin. L'ho trovato molto facile e intuitivo da usare.

La mia unica lamentela è che impone <input type="text"> anziché <input type="number">. Ciò significa che perdi la funzionalità di step, ma ottieni utenti del tuo sito che possono usare virgole nei campi.

Credo che si potrebbe usare valori attesi inferiori a 1.000 come <input type="number"> e valori oltre 1.000 come <input type="text">

Answer 4

Utilizzando autoNumeric plugin è possibile fatto un campo come input numerico con diversi separatori.

Include 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> 

È possibile digitare solo il numero, se si immette 100000,99 vedrete 100.000,99 .

Più: https://github.com/autoNumeric/autoNumeric

Answer 5

• controllare questo risultato finale webdesign.tutsplus.com tutorial

• Si riassume di seguito (vedi direct Codepen playground)

  $("#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"); 
      }); 
  

  });

Note:

• toLocaleString() funzione JavaScript mostrano realtà separatore delle migliaia (example and doc)

• corsa sotto codice nel tuo console per ottenere l'idea

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