如何在HTML input标签中显示无逗号等分隔符的整数？

问题原因 #

HTML的type="number"输入框仅接受无格式的纯数字（不能包含千位分隔符、逗号等非数字字符）。你的模板渲染${book.pages}时，自动给整数添加了千位分隔符（比如把1531变成1,531），不符合number输入的格式要求，因此保存时触发后端schema校验错误。

解决方案 #

方案1：模板层输出纯数字格式 #

根据你使用的模板引擎，调整渲染逻辑，确保输出无分隔符的纯数字：

• Thymeleaf：使用数字格式化工具去掉分隔符

  <input type="number" class="form-control" name="pages" value="${#numbers.formatInteger(book.pages, 0)}">
  

• JSP：用格式化标签输出纯数字

  <fmt:formatNumber value="${book.pages}" pattern="0" var="purePages"/>
  <input type="number" class="form-control" name="pages" value="${purePages}">
  

• 原生JS渲染：直接输出数字类型，避免转换为带分隔符的字符串

方案2：前端JS修正显示值 #

如果后端或模板无法修改，可在页面加载时用JS移除输入框中的非数字字符：

window.addEventListener('load', () => {
  const pagesInput = document.querySelector('input[name="pages"]');
  if (pagesInput.value) {
    pagesInput.value = pagesInput.value.replace(/[^0-9]/g, '');
  }
});

方案3：兼顾显示格式与提交要求 #

如果需要在页面显示千位分隔符，但提交纯数字，可改用text类型输入框，配合JS处理：

<div class="mb-3">
  <label for="pages" class="form-label">Pages</label>
  <input type="text" class="form-control" id="pages" name="pages" value="${book.pages}">
</div>
<script>
const input = document.getElementById('pages');
// 页面加载时格式化显示
input.value = parseInt(input.value).toLocaleString();
// 提交前转成纯数字
document.querySelector('form').addEventListener('submit', (e) => {
  input.value = input.value.replace(/[^0-9]/g, '');
});
</script>

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