Question

我有一个数字输入字段，如下所示：

<input type="number">

现在，如果我写一个数字，它会显示如下：

123.456

我想用逗号分隔符显示它，但显然没有任何效果！

期望的结果是：

123456

我尝试了lang="nb"，设置了pattern="\d+,\d+" type="text"，但都没有效果。

欢迎使用Javascript和HTML答案！

Answer 1

您可以使用toLocaleString

 var number = 123456.789;

    // German uses comma as decimal separator and period for thousands
    console.log(number.toLocaleString('de-DE'));
    // → 123.456,789

    // Arabic in most Arabic speaking countries uses Eastern Arabic digits
    console.log(number.toLocaleString('ar-EG'));
    // → ١٢٣٤٥٦٫٧٨٩

    // India uses thousands/lakh/crore separators
    console.log(number.toLocaleString('en-IN'));
    // → 1,23,456.789

    // the nu extension key requests a numbering system, e.g. Chinese decimal
    console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
    // → 一二三,四五六.七八九

    // when requesting a language that may not be supported, such as
    // Balinese, include a fallback language, in this case Indonesian
    console.log(number.toLocaleString(['ban', 'id']));
    // → 123.456,789

Answer 2

我允许用户键入两种标点符号，并使用事件监听器用逗号替换输入值中的所有句点。

如果您需要将该值作为JavaScript编号返回，则只需使用您要使用的输入元素调用getValueAsNumber即可。

var input = document.querySelector('input')

input.addEventListener('change', function() {
  this.value = this.value.replace(/\./g, ',')
})

function getValueAsNumber(input) {
  return +input.value.replace(/,/g, '.')
}

<label>
  Type a number!
  <input lang="nb" type="text" pattern="\d*[,.]\d+|\d+(?:[,.]\d*)?">
</label>

<button onclick="console.log(getValueAsNumber(input))">
  What number did I type?
</button>

Answer 3

如您在输入字段中所需，可以使用Javascript代码执行此操作。这是一个演示代码。我已经在 keyup 功能上执行了此操作，您也可以在更改上执行此操作。

https://jsfiddle.net/Dheer_Jangra/rfx34op8/2/

＆＃13;

var x;

$('#number').on("keyup", function() {
  x = removeCommas(this.value);
  this.value = addCommas(x);
});

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;
}

function removeCommas(value){
  value=value.replace(/\,/g,'');
  value=parseInt(value,10);
  return value;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="number"/>

＆＃13;

带逗号而非点

3 个答案: