应使用 input type="number" 实现百分比输入框，仅存储纯数字（如85），通过CSS伪元素添加“%”视觉后缀，并配合min/max、step、aria-label等确保语义化、可访问性与数据准确性。
百分比输入框的语义化写法：用 input type="number" 而不是 type="text"
直接用 type="text" 写“50%”看似简单，但破坏了数据语义——浏览器无法识别这是数值，屏幕阅读器读不出数字含义，表单校验、JS 计算、后端解析都得额外切字符串。正确做法是只存纯数字（如 50），把“%”作为视觉后缀处理。
推荐结构：
<label> 折扣率 <input type="number" min="0" max="100" step="0.1" value="85" aria-label="折扣率 百分比值"><span aria-hidden="true">%</span> </label>
关键点：
-
min/max控制合法范围，避免用户输 -5 或 200 -
step="0.1"支持小数（如 99.5%），不加则默认为整数步进 -
aria-label确保辅助技术读出“85 百分比值”，aria-hidden="true"防止“%”被重复朗读 - 不要用
placeholder="50%"—— 占位符不是标签，且会和真实值混淆
显示“50%”但提交“50”：CSS 伪元素添加 % 符号
如果必须视觉上显示“%”，又不想影响 value 值，用 ::after 最干净。否则 JS 动态拼接容易引发焦点丢失、光标跳位、React/Vue 受控组件失步等问题。
CSS 示例：
input[type="number"].percent {
padding-right: 1.5em;
}
input[type="number"].percent::after {
content: "%";
position: absolute;
right: 0.5em;
pointer-events: none;
}
注意：
- 必须加
padding-right，否则 % 会遮挡输入数字 -
pointer-events: none确保点击 % 区域仍聚焦到 input 框内 - 不要用
input[type="text"]+ JS 监听输入并自动补 % —— 用户粘贴 “75%” 时会变成 “75%%”，删除键行为错乱
后端接收时别假设带 %：统一约定数值单位
前端传 discount: 85，后端就按“85 表示 85%”处理；如果传 discount: 0.85，就是小数形式。二者不可混用。
常见翻车场景：
- 前端传
85，后端误当小数存成 0.85 → 实际变成 0.0085% - 前端传
"85%"字符串，后端用parseFloat得到 85，但没校验末尾是否有 %，导致"85px"也被解析成 85 - API 文档没写明单位，iOS Safari 某些版本对
type="number"的valueAsNumber返回 NaN，降级成字符串后未 strip %
建议：接口字段名明确带单位，比如 discount_percent（整数 0–100）或 discount_ratio（小数 0.0–1.0）。
移动端兼容性细节：iOS Safari 的 inputmode 和键盘类型
iOS Safari 对 type="number" 默认弹出数字键盘，但有时仍出现字母键。加 inputmode="decimal" 可提升触发精度（尤其需要小数时）。
实操写法：
<input type="number" inputmode="decimal" pattern="[0-9]*\.?[0-9]*" min="0" max="100" step="0.01">
说明：
-
pattern是 fallback，用于非 number 类型浏览器（如旧版 UC）的前端校验 -
step="0.01"和inputmode="decimal"配合，让 iOS 键盘显示小数点按钮 - 别信
inputmode="numeric"—— 它在 iOS 上表现不稳定，可能不显示小数点
真正难的不是怎么加 %，而是前后端对“这个数字究竟代表什么”达成一致。只要单位定义清楚、传输不带符号、校验落在边界内，剩下的都是样式和体验微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
