如何为input输入框添加不可删除的前后缀符号或固定文本

方案1：CSS视觉模拟（最稳定，无JS依赖，与目标站点实现逻辑一致） #

这是最推荐的实现方式，本质是将固定符号与输入框放在同一个容器内，视觉上模拟成输入框的一部分，用户完全无法操作到固定符号，自然不会被删除。

调整后的HTML结构 #

<!-- 带$前缀的输入框 -->
<div class="input-group">
  <span class="input-affix prefix">$</span>
  <input type="text" maxlength="12" name="purchasePrice" data-name="purchasePrice" placeholder="200,000" required>
</div>

<!-- 带%后缀的输入框 -->
<div class="input-group">
  <input type="text" maxlength="3" name="rate" data-name="rate" placeholder="2" required>
  <span class="input-affix suffix">%</span>
</div>

配套CSS代码 #

/* 模拟输入框外层容器样式 */
.input-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  gap: 4px;
  background: #ffffff;
  width: fit-content;
}
/* 聚焦时高亮，还原原生输入框交互效果 */
.input-group:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
/* 固定前后缀样式 */
.input-affix {
  color: #1f2937;
  font-size: 16px;
  user-select: none; /* 禁止用户选中符号 */
}
/* 输入框原生样式重置 */
.input-group input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  flex: 1;
  min-width: 120px;
  padding: 0;
}
.input-group input:focus {
  box-shadow: none;
  outline: none;
}

该方案的优势是完全没有兼容性问题，无需处理光标跳转、输入拦截等复杂逻辑，交互体验和原生输入框完全一致。

方案2：JS控制输入内容（适合需要将符号随表单一起提交的场景） #

如果要求提交的输入值本身就包含$、%符号，可以用JS监听输入事件固定前后缀，同时需要处理光标边界避免用户误删符号。

// 处理$前缀输入框
const priceInput = document.querySelector('input[name="purchasePrice"]');
priceInput.addEventListener('input', function() {
  let value = this.value.replace(/^\$/, '').replace(/[^0-9,]/g, '');
  this.value = value ? `$${value}` : '';
});
// 限制光标不能移到$前面，防止误删
priceInput.addEventListener('keydown', function(e) {
  if ((e.key === 'ArrowLeft' || e.key === 'Backspace') && this.selectionStart <= 1) {
    e.preventDefault();
    this.setSelectionRange(1, 1);
  }
});

// 处理%后缀输入框
const rateInput = document.querySelector('input[name="rate"]');
rateInput.addEventListener('input', function() {
  let value = this.value.replace(/%$/, '').replace(/[^0-9.]/g, '');
  this.value = value ? `${value}%` : '';
});
// 限制光标不能移到%后面，防止误删
rateInput.addEventListener('keydown', function(e) {
  const len = this.value.length;
  if ((e.key === 'ArrowRight' || e.key === 'Delete') && this.selectionStart >= len - 1) {
    e.preventDefault();
    this.setSelectionRange(len - 1, len - 1);
  }
});

该方案需要额外处理粘贴、全选删除等边界场景，实现复杂度较高，非必要场景优先选择CSS方案。

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