全屏只读表单需确保视觉真全屏、字段级只读可控且提交有效、校验逻辑与后端一致;用layer.open配type:1、area:['100vw','100vh']、shade:false等实现可靠全屏;readonly字段须配合form.render('input')、样式反馈及事件拦截,避免edit触发和聚焦问题。

全屏只读表单不是单纯拉伸容器或加 readonly 属性就能搞定的,核心在于三件事:视觉上真全屏、字段级只读控制不干扰提交、校验逻辑与后端约定一致。
用 layer.open 配 type: 1 实现真全屏容器
别用 type: 2(iframe)或仅靠 CSS 拉伸,那只是“伪全屏”,F11 退出后布局错乱、打印失真、移动端适配失败。
-
area: ['100vw', '100vh']比['100%', '100%']更可靠,避免父容器尺寸未定导致高度塌陷 - 必须设
shade: false,否则灰色遮罩盖住内容,用户无法交互 -
closeBtn: 0移除右上角按钮,改用自定义关闭按钮嵌在 content 内部,防止被 CSS 遮挡或重绘覆盖 -
title: false+offset: '0px'确保顶部不留白;若需标题,应内嵌到 HTML 字符串中 - 移动端要加
success回调并调layer.full(index),否则 DOM 渲染未就绪,全屏无效
表单字段设 readonly 但确保值可提交且校验可控
直接写 elem.readOnly = true 或 jQuery 的 .attr('readonly', 'readonly') 是生效的,但 UI 不同步、lay-verify 仍会校验——哪怕它已不可编辑。
- 设完属性后必须立即调
layui.form.render('input'),只刷新 input 类型控件,避免全表单重绘影响性能 -
readonly字段值会随表单提交,form.val()也能取到;disabled则完全不提交、form.val()返回undefined -
required校验对readonly字段依然生效,对disabled自动跳过——这点必须跟后端确认是否允许只读字段参与必填校验 - 建议手动加样式反馈:
background: #f5f5f5; color: #666; cursor: not-allowed;,否则用户看不出只读
表格中嵌入只读表单时,templet 和事件拦截缺一不可
Layui 表格不支持列级 readonly 配置,得靠 templet 手动拼 <input>,但三个点常被忽略:
- 在
templet函数里判断状态后,必须显式加readonly属性和对应样式,不能只靠 JS 后续设置——模板渲染时 DOM 已生成,JS 设置晚了 - 即使加了
readonly,table.on('edit()')仍会触发,因为 Layui 默认监听所有input的change,得在回调开头加判断:if ($(this).attr('readonly')) return; - 要阻止聚焦行为(比如点击后光标闪一下),得额外绑定:
$(this).on('focus', function(){ this.blur(); }) - 如果表格用了
fixed: true,全屏后列宽错位,必须监听fullscreenchange并在success中调table.resize()+setTimeout延迟 16ms
最麻烦的从来不是怎么写代码,而是确保 readonly 在表单、表格、弹窗、动态加载等不同上下文里,提交行为、校验逻辑、视觉反馈都保持一致——尤其是后端是否接收该字段、是否参与业务规则判断,这点必须在接口文档里白纸黑字写清楚。


















