在input右侧加单位文字需用div包裹input与独立span，外层设position:relative，span设absolute定位并加padding-right防遮挡，单位不参与校验但需提交前正则清理。
layui 表单中如何在 input 右侧加单位文字（如 % 或 元）
直接用 layui 官方的 layui.form.render() 不支持原生 input 内嵌单位；必须手动组合 DOM 结构，否则单位会脱离表单校验流、丢失 focus 样式、或被清空时错位。
核心思路是：不用 input 单独撑起整个输入区域，而是用 div 包裹 input + 单位 span，再通过 CSS 控制宽度与对齐。layui 的表单样式（如 .layui-input）本身兼容这种结构。
正确 HTML 结构写法（避免被 layui 重置样式）
不要把单位塞进 input 的 placeholder 或用伪元素模拟——那样无法参与表单值提交，也不响应 form.on('submit') 的取值逻辑。
- 单位文字必须是独立的
span元素，和input同级，且包裹在同一div class="layui-input-inline"或div class="layui-form-item"内 -
input保留name和lay-verify等属性，单位span加class="layui-unselect"防止被选中干扰 - 避免给
input设固定width，改用layui-input-inline的弹性宽度机制
<div class="layui-form-item">
<label class="layui-form-label">折扣率</label>
<div class="layui-input-inline">
<input type="text" name="discount" lay-verify="number" autocomplete="off" class="layui-input"><span class="layui-unselect" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999;">%</span>
</div>
</div>
关键 CSS 调整（解决遮挡、错位、响应式问题）
默认情况下，span 会破坏 layui-input-inline 的盒模型，导致 input 宽度溢出或单位被裁剪。必须显式定位并预留右侧空间：
- 给外层
div.layui-input-inline加position: relative - 给单位
span设position: absolute，配合right和top/transform居中对齐 - 给
input.layui-input加padding-right（至少30px），防止文字被单位遮住 - 如果用了
lay-key或动态渲染，确保单位span在form.render()后仍存在（不建议在form.render()里重绘单位）
注意表单提交与验证的连带影响
单位只是视觉层，不影响 form.val() 获取值，但容易踩两个坑：
- 用户可能误输单位到 input 里（比如输成
80%），此时需在提交前用正则清理：value.replace(/[%元￥]/g, '') - 若启用了
lay-verify="required"，单位span不参与校验，但 input 为空时仍会报错——这是正常行为，无需额外处理 - 移动端小屏下，单位文字可能换行或挤压 input，建议加媒体查询限制最小宽度：
@media (max-width: 480px) { .layui-input-inline { width: 120px; } }
单位文字的本质是「装饰性覆盖」，不是表单控件的一部分。只要 input 值干净、位置不跑偏、焦点态正常，就达到了目的。别试图用 JS 动态插入单位——维护成本高，且和 layui 的 re-render 逻辑冲突。
