如何在HTML/JavaScript输入文本框的输入值末尾添加%符号？

首先说明你之前的方法无效的原因：<input>属于替换元素，浏览器不会为它生成伪元素（比如::after），所以CSS伪元素的方法根本不会生效；直接在输入框后加%会显示在框外，达不到嵌入框内的效果。

下面提供两种可行的实现方案：

方案一：CSS容器模拟（不修改输入值） #

用一个容器包裹输入框，把容器样式改成输入框的样子，再通过容器的伪元素添加%，视觉上让%看起来在输入框内部。

<div class="input-with-percent">
  <input type="text" digitsOnly>
</div>

.input-with-percent {
  position: relative;
  display: inline-block;
  /* 模拟默认输入框的边框和圆角 */
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.input-with-percent input {
  border: none;
  outline: none;
  background: transparent;
  /* 右边留足够空间给%符号 */
  padding: 0.375rem 1.5rem 0.375rem 0.75rem;
  font-size: 1rem;
}

.input-with-percent::after {
  content: "%";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  /* 让点击和输入不会触发在%上 */
  pointer-events: none;
  color: #495057;
}

这种方法的好处是输入框的实际值还是纯数字，提交表单时不需要额外处理；缺点是如果输入框有特殊样式（比如:focus状态），需要同步给容器。

方案二：JavaScript实时处理输入值（修改输入值） #

通过JS监听输入事件，自动给输入的数字添加%，同时确保用户输入的内容只保留数字。

<input type="text" digitsOnly id="percent-input">

const input = document.getElementById('percent-input');

input.addEventListener('input', function() {
  // 过滤掉非数字字符
  const pureNumber = this.value.replace(/[^0-9]/g, '');
  // 有数字就加上%，否则清空
  this.value = pureNumber ? `${pureNumber}%` : '';
});

// 提交时获取纯数字值的示例
function getCleanValue() {
  return input.value.replace('%', '');
}

这种方法的好处是%是输入值的一部分，用户视觉上完全符合预期；需要注意的是，提交表单时要去掉%才能拿到纯数字。

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