如何在不影响输入值的情况下为input输入框添加美元符号$？

嘿，我来给你几个靠谱的方案——既能在输入框视觉上加上美元符号，又绝对不会改动输入框的实际值（提交表单时拿到的还是用户输入的纯数字，不会带$符号）：

方法1：纯CSS伪元素实现（首推！最简单） #

这个方案不用修改你的HTML结构，加几行CSS就能搞定，美元符号会固定显示在输入框左侧，完全不占用输入空间。

你的原HTML可以保持不变：

<td class="td10">
  <input type='text' class='form-control' id="boqRate" name="boq[boqRate]">
</td>

直接加下面的CSS就行：

/* 给父元素td设置相对定位，让伪元素能定位在它里面 */
.td10 {
  position: relative;
}

/* 用before伪元素生成美元符号 */
.td10::before {
  content: "$";
  position: absolute;
  left: 10px; /* 调整这个值让符号位置更合适 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  color: #666; /* 可以自定义符号颜色 */
  pointer-events: none; /* 关键！点击符号时会穿透到输入框，不影响输入操作 */
}

/* 给输入框左边加内边距，避免输入的文字被符号挡住 */
.td10 .form-control {
  padding-left: 25px;
}

这个方法的好处是完全不涉及JS，输入框的value始终是用户输入的内容，提交表单时不会带$，非常干净。

方法2：用容器包裹+前置元素（适合需要更灵活控制的场景） #

如果不想用伪元素，也可以给输入框套个父容器，用真实的<span>放美元符号，原理和上面差不多：

修改后的HTML：

<td class="td10">
  <div class="input-dollar-wrapper">
    <span class="dollar-sign">$</span>
    <input type='text' class='form-control' id="boqRate" name="boq[boqRate]">
  </div>
</td>

对应的CSS：

.input-dollar-wrapper {
  position: relative;
  display: inline-block; /* 让容器和输入框一样宽 */
}

.dollar-sign {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

.input-dollar-wrapper .form-control {
  padding-left: 25px;
}

这个方案适合你需要给美元符号加额外样式（比如hover效果）的情况，比伪元素更灵活。

方法3：JavaScript辅助（适合动态场景） #

如果需要根据输入状态动态调整符号显示（比如输入为空时隐藏符号），可以用JS，但记住只改显示，不动输入框的实际值：

<td class="td10">
  <div class="input-wrapper">
    <input type='text' class='form-control' id="boqRate" name="boq[boqRate]" oninput="toggleDollar(this)">
    <span class="dollar-sign">$</span>
  </div>
</td>

CSS和方法2一样，再加一段JS：

function toggleDollar(input) {
  const signElement = input.nextElementSibling;
  // 输入为空时隐藏符号，有内容时显示
  signElement.style.visibility = input.value.trim() ? 'visible' : 'hidden';
}

不过这个方法一般用得少，因为纯CSS方案已经能解决绝大多数需求了。

小提示 #

• 记得根据你的表单样式调整padding-left和left的值，确保符号位置和输入内容不重叠。
• 如果需要限制用户只能输入数字，可以给input加上type="number"或者inputmode="numeric"，再配合pattern="[0-9]*"，这样用户输入更规范，也不会影响美元符号的显示。

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