Question

这是我的代码。我正在尝试使用格式化的数字动态更新输入字段。

$("#money").keyup(function() {
    var x = this.value;
    var y = parseInt(x).toLocaleString();
    this.value = y;
});

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

谢谢！

编辑：更改为type =“text”仍然是相同的结果。我确实需要包含这种格式。当我使用控制台查看输出时，它按预期工作。

Answer 1

如果您想用逗号显示数字，则无法使用type="number"，它只允许使用普通数字。因此，请使用type="text"。

但如果号码有逗号，parseInt()将无法解析它。在解析之前从输入中删除所有非数字字符。

$("#money").keyup(function() {
	var x = $(this).val().replace(/\D/g, '');
	var y = parseInt(x).toLocaleString();
  $(this).val(y);
});

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

Answer 2

由于您使用toLocaleString，您是否尝试实现123,34等格式化输出？

如果是，那么当您获得格式化的输出并执行下一个keyup时，parseInt将再次尝试解析数字，您将获得NaN。所以你的textbox变成了空白。

您已经在使用jquery，为什么不使用以下内容：

$("#money").keyup(function() {
    var x = $(this).val();

    var y = parseInt(x);
  $(this).val(y);

});

我还尝试了var y = x.toLocaleString();而不是parseInt，4个输入后文本框不会变为空白。

Answer 3

input type=number首先禁止使用非数字字符，但您可以使用文本字段。

现在，随着格式的推出，您的值会丢失，因为parseInt会在遇到非数字字符时立即停止解析。要解决此问题，您可以在调用parseInt()之前删除格式。

此外，在事件处理程序中，您可以通过this关键字访问该字段。您不需要设置其他变量。

$("#money").on("input", function() {
  // Get rid of the commas, extract the number and format
  this.value = parseInt(this.value.replace(/,/g, ""), 10).toLocaleString('en-us');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id='money'> (hit TAB after entering number)

输入框的值在4个数字后重置

3 个答案: