HTML Номер типа ввода Thousand separator

Я хочу иметь тысячу разделителей (например, 1 000 000) в поле ввода. Тем не менее, он должен иметь номер типа, потому что мне нужно настроить его значение с помощью "шага". Код:

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

Я попытался использовать Javascript для настройки значения, но не работал. Любая помощь будет оценена по достоинству. Благодарю!

Ответ 1

Используя autoNumeric плагин вы можете сделать поле в виде числового ввода с различными разделителями.

Включить плагин:

<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>
 jQuery(function($) {
$('#DEMO').autoNumeric('init');   
 });
</script>

Вы можете ввести только номер, если вы введете 100000,99, вы увидите 100 000,99.

Подробнее: https://github.com/autoNumeric/autoNumeric

Ответ 2

пытаться

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

csq рекомендует использовать jQuery autoNumeric плагин. Я нашел это очень простым и интуитивным в использовании.

Моя единственная проблема заключается в том, что она заставляет <input type="text"> вместо <input type="number">. Это означает, что вы теряете функциональность step, но вы заставляете пользователей вашего сайта использовать запятые в полях.

Я думаю, вы могли бы использовать ожидаемые значения менее 1000 как <input type="number"> и значения более 1000 как <input type="text">

Ответ 4

Проверьте этот учебник webdesign.tutsplus.com

Окончательный результат суммирован здесь (посмотрите на прямую площадку Codepen)

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

Заметки:

Функция JavaScript toLocaleString() Фактически показывает разделитель тысяч (пример и документ)
запустите приведенный ниже код в вашей консоли, чтобы получить идею

(30000000).toLocaleString( 'EN-US', {useGrouping: истинный})

Ответ 5

Вы можете подделать эту функцию, используя псевдоэлемент, чтобы отобразить запятую.

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

Требуется обертывание div, потому что входы не могут иметь псевдоэлементы.

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

И немного JavaScript для вставки запятых каждый третий символ

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

Посмотрите скрипку