HTML文本输入框千分位显示与提交原值实现方案咨询

当然可以！其实你完全不用写额外的逗号解析逻辑，只需要用「显示输入框+隐藏输入框」的组合就能搞定，思路很简单：

• 用一个隐藏的输入框存储原始的无逗号数值，这个输入框设置name="price"，是表单提交时实际会被serialize()读取的对象
• 再用一个普通的文本输入框负责展示千分位格式的数值，这个输入框不要设置name属性，这样它不会被表单序列化包含进去
• 给显示用的输入框添加简单的事件监听，实时同步用户输入的内容到隐藏输入框（自动去掉逗号），同时保持显示框的千分位格式

下面是具体的实现代码：

<form>
  <!-- 隐藏输入框：存储原始数值，表单提交时会被serialize读取 -->
  <input type="hidden" name="price" value="20000">
  <!-- 显示输入框：仅用于展示和用户交互，无name属性 -->
  <input type="text" id="display-price" value="20,000" inputmode="numeric">
  <button type="submit">Save</button>
</form>

<script>
const displayInput = document.getElementById('display-price');
const hiddenInput = document.querySelector('input[name="price"]');

// 把数字格式化为千分位字符串
function formatToThousands(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// 把千分位字符串还原为原始数字字符串
function parseFromThousands(str) {
  return str.replace(/,/g, '');
}

// 初始化显示格式
displayInput.value = formatToThousands(hiddenInput.value);

// 用户输入时同步更新隐藏输入框，并保持显示格式
displayInput.addEventListener('input', function() {
  const rawValue = parseFromThousands(this.value);
  hiddenInput.value = rawValue;
  // 重新格式化显示，确保输入后始终是千分位格式
  this.value = formatToThousands(rawValue);
});
</script>

这样设置后，用户在界面上看到的是带逗号的友好格式，但调用$('form').serialize()时，获取到的price值就是原始的20000，完全不需要在提交阶段做额外的逗号解析。另外给显示输入框加上inputmode="numeric"，还能让移动端用户弹出数字键盘，提升交互体验。

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