Question

我有一个文本字段。我在文本框中写数字。在我写作的时候，我想添加千位分隔符。我找到了这个解决方案：

HTML：

<input type="text" name= "name1" id="id1" onclick="addComma('id1');">
<input type="text" name= "name1" id="id2" onclick="addComma('id2');">

JQUERY：

function addComma(id){
$("#"+id).keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});
}

这有时只能起作用。有时它根本不显示逗号。

请告诉我我的代码有什么问题。

Answer 1

我建议您在blur事件上格式化输入值。如果您在用户输入时执行此操作，则会出现意外行为，并可能导致混淆。

另请注意，您的HTML具有重复的id属性，这些属性无效，并且还有奇怪的jQuery和JS混合。您应该删除过时的on*事件属性，并使用不显眼的事件处理程序。试试这个：

$('.foo').blur(function() {
  $(this).val(function(i, v) {
    return v.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1" id="id1" class="foo" />
<input type="text" name="name2" id="id2" class="foo" />

Answer 2

以下是在文本框中键入时添加逗号的解决方案。您需要为每个输入触发keyup事件。

$('input').keyup(function(event) {
    // skip for arrow keys
    if(event.which >= 37 && event.which <= 40) return;

    // format number
    $(this).val(function(index, value) {
      return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
  });

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

在文本框中键入时添加逗号

2 个答案: