Question

我希望<input type="number" />当用户输入时，它会自动为每个偶数千位添加<span class="t"></span>，例如：

1234567890

它应该转换为：

<span class="t">1</span>234<span class="t">567</span>890

我已经有了进行格式化的代码：

function N(n) {
  n = +n;
  if(!n) return '<i>0</i>';
  var str = '';
  var odd = false;
  while(n>0) {
    var rem = n % 1000;
    n = Math.floor(n / 1000)|0;
    rem = ((n) ? (P0(rem,3)) : rem);
    if(odd) rem = '<span class="n">' + rem + '</span>';
    str = rem + str;
    odd = !odd;
  }
  return str;
}

和css：

span.n {
    padding-left: 3px;
    padding-right: 3px;
}

现在的问题是，如何将html呈现到input本身，以便每次更改input（当用户剪切，粘贴，执行按键，使用鼠标拖动某些子字符串时）将在该输入上正确呈现为HTML。

Answer 1

使用AutoNumeric，零依赖JS插件

Answer 2

我不认为html可以在普通的html输入标签中正确呈现。至少不像你期望的那样。后来很难解析。

为什么不使用像jquery currency这样的jQuery插件？（假设您在问题中添加了标签“jQuery”）

然后你的代码会很简单，没有麻烦：

<input type="number" class="currency"/>
<script>
    $('input.currency').currency(); //add some options if you want to change the formatting
</script>

Answer 3

没关系，我只会使用this真棒插件：3

jquery-number插件可以添加千位分隔符，并在您键入时进行更新。

示例：

$('#the_input').number(true,' ');
// whenever #the_input updated/keypress, it reformat automatically

如何使用jQuery键入货币格式

3 个答案: