input[type="number"]原生不支持百分比显示，需用JavaScript在blur或input事件中双向同步数值与“%”展示，value始终存数字，提交前用parseFloat清洗。
input type="number" 本身不支持百分比符号自动显示
浏览器原生 input[type="number] 只认纯数字，输入 % 会被直接拦截或清空。想让用户看到“50%”、编辑时还能保持数值逻辑，必须靠 JavaScript 补位，不能只靠 HTML 属性。
常见错误是给 input 加 value="50%" 或用 placeholder="%" —— 这些都不影响实际值类型，提交时仍是字符串，且无法被表单验证为数字。
实操建议：
- HTML 中仍用
<input type="number">，保证键盘弹出数字键盘、禁用非数字字符 - 用
data-unit="%"或自定义属性标记单位意图，避免污染 value - 数值存储和提交始终用小数（如
0.5）或整数（如50），单位仅用于展示 - 不要在
value里拼接%，否则parseFloat(input.value)会返回NaN
用 input 和 blur 事件做「显示百分比、存数值」的双向同步
这是最轻量、兼容性最好、也最容易调试的做法：输入时显示纯数字（比如用户输 75），失焦时自动补 %；展示时渲染带 % 的文本，但内部 value 保持可计算的数值。
立即学习“前端免费学习笔记（深入）”；
示例逻辑（内联简写，可封装）：
<input type="number" id="rate" min="0" max="100" step="0.1">
<script>
const el = document.getElementById('rate');
el.addEventListener('blur', () => {
const v = parseFloat(el.value);
if (!isNaN(v) && v >= 0 && v <= 100) {
el.value = v + '%'; // 仅用于显示
}
});
el.addEventListener('focus', () => {
// 聚焦时去掉 %，方便编辑
el.value = el.value.replace('%', '');
});
</script>
注意点：
- 只在
blur时格式化显示，不在input实时触发，避免光标跳动 -
focus时清理%是为了防止用户二次编辑卡住，但别用select()全选——移动端体验差 - 如果后端要接收 0.75 而不是 75，就在提交前把
parseFloat(el.value) / 100
需要实时显示「50%」且允许用户删掉 % 继续输？用 input 事件 + 正则清洗
当设计要求输入框里一直显示 %（比如用户打字过程就看到 “30%”），就得监听 input 事件，并对每次输入做清洗。这比 blur 方案复杂，但更贴近“所见即所得”。
关键难点是：既要允许用户删 %，又要防止输进非法字符，还得保证 value 始终可 parse。
实操要点：
- 用正则
/^(\d*\.?\d*)%?$/匹配当前输入，提取纯数字部分 - 限制范围（如 0–100）必须在清洗后立即判断，否则用户可能输到 “120%” 才报错
- 不要直接改
el.value在input里——容易打断用户输入节奏；推荐用setSelectionRange保光标位置 - 移动端 iOS Safari 对
input事件响应有延迟，建议加防抖（setTimeout延迟 50ms）
form 提交时怎么确保后端拿到的是数字而不是字符串 "75%"
无论界面上怎么显示，form.submit() 或 FormData.get() 拿到的永远是 el.value 当前字符串值。如果你在 blur 后设了 el.value = "75%"，后端收到的就是字符串，不是数字。
正确做法只有一条：提交前统一清洗。
- 监听
form.submit，对每个百分比input手动提取数值：parseFloat(el.value) || 0 - 或者用
FormData替代原生提交：fd.set('rate', parseFloat(el.value) || 0) - 千万别依赖
input的valueAsNumber属性——只要 value 含%，它就返回NaN - 后端也应做兜底校验，不能假设前端传来的一定是数字
最易被忽略的一点：CSS 伪元素（::after）加 % 看似完美，但它不参与表单值，也不响应用户交互，纯属障眼法；真要交互，JavaScript 就绕不开。
