Layui表格金额输入需用edit: "number" + keydown/input双重拦截 + 正则^\d+(\.\d{0,2})?$过滤,再于edit事件done回调清洗,否则粘贴、多小数点、负号等均无法拦截。

layui table edit 输入金额时如何限制小数位和符号
直接上结论:Layui 的 edit 属性本身不校验格式,必须靠 edit: "number" + 自定义事件拦截 + 正则过滤才能真正控制金额输入。纯靠 type="number" 或 lay-key 是拦不住粘贴、拖拽、负号和多余小数点的。
常见错误现象:edit: "number" 看似能输数字,但用户一粘贴 "123.45.67" 或 "-¥100" 就崩;手动输入 123. 后继续敲 4,变成 123.4 还算好,但敲成 123..4 也能进;表格失去焦点后,123.456 没被截断,后端收到三位小数就可能报错。
- 用
event: "edit"监听单元格编辑事件,在done回调里做最终清洗(不是只靠blur) - 在
keydown和input阶段双重拦截:前者防非法按键(如字母、多个小数点),后者防粘贴/拖入 - 正则推荐用
^\d+(\.\d{0,2})?$—— 允许空、整数、或最多两位小数,不接受负数(金额通常非负) - 注意
parseFloat()会把"123."变成123,但用户看到的是原始字符串,得主动补零或截断再赋值回td
为什么不能只靠 input[type=number] + step="0.01"
因为 Layui 表格的 edit 模式生成的是普通 <input>,即使设了 type="number",浏览器原生行为对粘贴、上下箭头、以及部分键盘输入(比如 Mac 上的 Option+Shift+7 输入 ¥)完全不设防。更关键的是:Layui 不会自动把 step="0.01" 转成校验逻辑,它只影响点击上下箭头时的增量,对键盘输入无效。
使用场景很典型:财务单据录入、报价单、结算明细——这些地方多输一位小数,可能就是几万块误差。
-
step="0.01"在移动端软键盘可能触发数字键盘,但桌面端几乎没用 - Chrome 会允许输入
e、E、+、-,然后input.value变成空字符串,导致你取不到值 - Firefox 对
step的处理更宽松,甚至允许123.456通过验证 - Layui 的
done回调里拿到的value是原始字符串,不是转成 number 后的值,所以别依赖typeof value === "number"
edit: "number" 下如何安全绑定金额校验逻辑
核心是绕过 Layui 默认的输入流,接管输入过程。不要试图改写 layui.table 源码,用官方支持的 tool 和 edit 事件钩子即可。
实操建议:
- 在
cols中该列配置{field: "price", title: "单价", edit: "number", unresize: true} - 表格渲染后,用
table.on("edit(test)", function(obj){...})拿到每次编辑结束事件 - 在回调里立即用正则清洗:
let v = (obj.value || "").replace(/[^\d.]/g, "").replace(/\.{2,}/g, ".").replace(/^\.|\.$/g, ""); - 再用
^\d+(\.\d{0,2})?$匹配,不匹配就obj.elem.val("")清空,并layer.msg("请输入合法金额(最多两位小数)", {icon: 5}); - 特别注意:如果用户删光内容,
obj.value是空字符串,要允许,别强行塞0.00—— 有些字段允许为空
容易被忽略的兼容性坑
移动端 iOS Safari 对 inputmode="decimal" 支持差,软键盘不会默认弹出带小数点的数字键盘;Android Chrome 则相对稳定。但这不是前端能完全控制的,得靠兜底校验。
另一个真实坑:edit 单元格在编辑中按 Enter 提交,但 Layui 默认不触发 done,而是直接 blur。必须监听 keydown 捕获 Enter 并手动调用 obj.update(),否则用户敲完回车,值没走校验就进去了。
- 不要依赖
onkeyup做实时过滤——会导致光标跳到末尾,用户体验极差 - IE11 不支持
inputmode,且event.data在粘贴时为undefined,得用setTimeout延迟读取input.value - 金额列如果开启排序,Layui 默认按字符串排
"10.5""2.5",得在sort回调里用parseFloat转换


















