如何实现带前置美元符号和千位逗号分隔的货币输入框

一、CSS样式修复（解决美元符号对齐和光标重叠问题） #

你原有代码的问题在于：伪元素用相对定位不会挤压输入框内容区域，导致光标和符号重叠，同时没有设置垂直对齐规则，符号位置偏移。
修改后的CSS代码如下：

.fields {
  margin: 0 10px 0 0;
  position: relative; /* 父元素设为相对定位，作为伪元素的定位基准 */
  display: inline-flex;
  align-items: center;
}

.fields:before {
  content: "$";
  position: absolute;
  left: 30px; /* 可根据实际显示效果调整数值 */
  z-index: 1; /* 确保符号在输入框上层显示 */
  color: #333;
}

#price {
  border-radius: 5px;
  margin: 15px;
  padding: 10px 10px 10px 25px; /* 左侧增加内边距，留出美元符号的位置，避免内容重叠 */
  color: black;
}

修复说明 #

• 父容器.fields设为相对定位，伪元素用绝对定位固定位置，不会影响输入框的文本流
• 输入框左侧增加内边距，从最左到文本起始位置预留了美元符号的宽度，不会出现光标、输入内容和符号重叠的问题
• 自动垂直居中对齐美元符号，不会出现位置偏移

二、千位分隔符功能实现 #

注意：原生type="number"的输入框不支持显示逗号字符，所以需要先把input的type改成text，再做数值校验和格式化。

1. HTML修改 #

把输入框的type属性从number改为text：

<input type="text" name="price" id="price" min="0" max="10000000000" required data-type="number">

2. JS代码实现 #

新增输入监听逻辑，实时格式化输入内容，提交时自动转换为纯数字：

// 千位分隔符格式化函数
function formatNumber(num) {
  // 先移除所有非数字字符
  num = num.replace(/[^\d]/g, '');
  // 空值直接返回
  if (!num) return '';
  // 转千位分隔符格式
  return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// 监听输入框内容变化，实时格式化
$('#price').on('input', function() {
  const originVal = $(this).val();
  const formattedVal = formatNumber(originVal);
  // 保存光标位置，避免格式化后光标跳转到末尾
  const start = this.selectionStart;
  const end = this.selectionEnd;
  const diff = formattedVal.length - originVal.length;
  $(this).val(formattedVal);
  this.setSelectionRange(start + diff, end + diff);
})

// 表单提交时，把逗号去掉转成纯数字使用
$('#rev-calculator').on('click', 'button', function(e) {
  e.preventDefault();
  // 移除所有逗号得到纯数字值
  var price = $("#price").val().replace(/,/g, '');
  // 可选：转成数字类型
  price = price ? Number(price) : 0;
  // 可选：增加数值范围校验
  if (price < 0 || price > 10000000000) {
    alert('请输入0到10000000000之间的数值');
    return;
  }
  console.log(price);
})

功能说明 #

• 自动过滤非数字输入，只能输入0-9的字符
• 输入过程中实时添加千位逗号，不会打断输入体验，光标位置不会乱跳
• 提交表单时自动把格式化的字符串转成纯数字，不影响后续计算逻辑

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