使用jQuery为输入框数值添加千位逗号时内容被清空问题求助

故障原因 #

你使用了type="number"类型的输入框，这是问题的核心：
根据HTML规范，type="number"的输入框仅接受合法数值作为有效值，千位逗号属于非数值字符，当代码插入逗号后，浏览器检测到输入框值不符合数值规范，会自动将value置为空，因此4位数字触发千位分隔符插入时就会出现输入内容被清空的现象。

解决方案 #

推荐将输入框改为type="text"，同时添加inputmode="numeric"属性唤起数字键盘，既保留移动端数字输入的体验，又支持存储带逗号的格式化字符串。
若提交时需要使用纯数值，可通过以下代码提取：

const pureNumber = $("#youpay").val().replace(/,/g, '')

修改后完整可运行代码 #

JS代码

$("#youpay").on('keyup', function(event) {
  // 补充event参数，兼容部分浏览器原生event未挂载的问题
  if (event.which >= 37 && event.which <= 40) return;

  // 格式化数字
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 修改type为text，添加inputmode属性唤起数字键盘 -->
<input class="form-control english text-center" id="youpay" type="text" inputmode="numeric">

内容的提问来源于stack exchange，提问作者Amir Ghadiri