Как добавить разделитель тысяч в мою HTML-форму - PullRequest
Новая
       13

Как добавить разделитель тысяч в мою HTML-форму

7 голосов
/ 19 марта 2012

Например, у меня есть текстовое поле, я ввожу 12000, и я хочу, чтобы оно было похоже на 12000 в текстовом поле. Как бы я это сделал? Я использую HTML, чтобы сделать текстовое поле

Ответы [ 6 ]

10 голосов
/ 19 марта 2012

Попробуйте что-то вроде this 

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

Затем используйте его на своих текстовых полях, например, так: 

<input type="text" id="txtBox" onchange="return addCommas(this.value)" />

Надеюсь, что поможет

7 голосов
/ 25 февраля 2014

Используйте плагин jQuery autoNumeric : 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Input with separator</title>
  <script type="text/javascript" src="jquery-1.11.0.js"></script>
  <script type="text/javascript" src="autoNumeric.js"></script>
  <script type="text/javascript">
    $( document ).ready( function() {
      $("#myinput").autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'}
      );
    });
  </script>
</head>
<body>
  <input id="myinput" name="myinput" type="text" />
</body>
</html>
3 голосов
/ 19 марта 2012

Это, наверное, плохая идея ... 

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Comma Thousands Input</title>
<style>
label, input, button{font-size:1.25em}
</style>
<script>
// insert commas as thousands separators 
function addCommas(n){
    var rx=  /(\d+)(\d{3})/;
    return String(n).replace(/^\d+/, function(w){
        while(rx.test(w)){
            w= w.replace(rx, '$1,$2');
        }
        return w;
    });
}
// return integers and decimal numbers from input
// optionally truncates decimals- does not 'round' input
function validDigits(n, dec){
    n= n.replace(/[^\d\.]+/g, '');
    var ax1= n.indexOf('.'), ax2= -1;
    if(ax1!= -1){
        ++ax1;
        ax2= n.indexOf('.', ax1);
        if(ax2> ax1) n= n.substring(0, ax2);
        if(typeof dec=== 'number') n= n.substring(0, ax1+dec);
    }
    return n;
}
window.onload= function(){
    var n1= document.getElementById('number1'),
    n2= document.getElementById('number2');
    n1.value=n2.value='';

    n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){
        e=e|| window.event; 
        var who=e.target || e.srcElement,temp;
        if(who.id==='number2')  temp= validDigits(who.value,2); 
        else temp= validDigits(who.value);
        who.value= addCommas(temp);
    }   
    n1.onblur= n2.onblur= function(){
        var temp=parseFloat(validDigits(n1.value)),
        temp2=parseFloat(validDigits(n2.value));
        if(temp)n1.value=addCommas(temp);
        if(temp2)n2.value=addCommas(temp2.toFixed(2));
    }
}
</script>
</head>
<body>
<h1>Input Thousands Commas</h1>
<div>
<p>
<label> Any number <input id="number1" value=""></label>
<label>2 decimal places <input id="number2" value=""></label>
</p></div>
</body>
</html>
2 голосов
/ 19 марта 2012

Для пользовательского ввода я бы рекомендовал не форматировать значение, чтобы включить запятую. Намного проще иметь дело с целочисленным значением (12000), чем с строковым значением (12000) после его отправки.

Однако, если вы уверены в форматировании значения, то, как рекомендует @achusonline, я бы замаскировал значение. Вот плагин jQuery, который был бы полезен для получения этого результата:

http://digitalbush.com/projects/masked-input-plugin/

2 голосов
/ 19 марта 2012

Вы можете использовать API Javascript Mask

0 голосов
/ 18 мая 2019

Вы можете попробовать этот простой Javascript 

<script type="text/javascript">

    function addcommas(x) {
    //remove commas
    retVal = x ? parseFloat(x.replace(/,/g, '')) : 0;

    //apply formatting
    return retVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
  </script>

HTML-код 

<div class="form-group">
                        <label>Amount </label>
                        <input type="text" name="amount"  onkeyup="this.value=addcommas(this.value);"class="form-control" required="">
                      </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...