layui搜索框需操作渲染后的实际input元素设readonly,如.layui-form-select .layui-input,并调用layui.form.render()同步ui;设readonly后值仍可提交,但需防focus/选中等交互。

layui搜索框本身没有 readonly 属性,得改它背后的 input 元素
layui 的搜索框(比如 lay-search 开启的下拉搜索、或 toolbar 里手写的 <input>)本质还是原生 <input>,但被 layui 封装渲染后,直接在 HTML 标签上写 readonly 通常无效——因为 layui 会覆盖 DOM 属性或用自定义结构替代真实 input。
真正生效的方式是操作渲染后的实际 input 节点:
- 如果是
lay-search的 select:渲染后,真实 input 在.layui-form-select .layui-input里,需用 JS 找到并设inputEl.setAttribute('readonly', 'readonly') - 如果是 toolbar 里写的搜索框:确保它有唯一 class 或 name,比如
name="keyword",再用$('input[name="keyword"]').attr('readonly', 'readonly') - 设完必须手动触发
layui.form.render(),否则样式不更新、光标仍可聚焦
table toolbar 搜索框设只读后,form.on('submit()') 还能取到值吗
能。只要用了 readonly(不是 disabled),input 的 value 依然参与表单序列化,form.on('submit(filter)') 中的 data.field 仍能拿到该字段值。
但要注意两个陷阱:
- 如果搜索框外层没包
layui-form类,form.on根本监听不到 submit 事件 - 某些定制主题 CSS 把
.layui-input设了pointer-events: none,看起来像只读,但实际没加readonly属性——此时 submit 仍能触发,但用户无法手动输入,容易误判为“失效”
select 的 lay-search 输入框怎么禁用编辑但保留下拉选项
select 元素本身不支持 readonly,lay-search 渲染出的搜索输入框是独立的 <input>,和原始 <select></select> 分离。想让它“可看不可输”,不能动 <select></select>,而要锁住那个 input:
- 先确保
lay-search已启用(且版本 ≥ 2.9.16),否则根本没这个 input - 用选择器定位:
$('.layui-form-select dd input.layui-input')或更稳妥地用$(select).closest('.layui-form-select').find('input.layui-input') - 执行
inputEl.readOnly = true或inputEl.setAttribute('readonly', ''),然后调layui.form.render() - 别碰
disabled:它会让整个 select 失效,下拉菜单点不开,选项也提交不了
为什么加了 readonly 还能 focus 和选中文字
这是 readonly 的标准行为——它只禁止修改内容,不限制聚焦、选中、复制。如果你希望视觉+交互都禁用,得补 CSS 和 JS:
- 加样式:
background: #f5f5f5; color: #666; cursor: not-allowed; - 拦截聚焦:
inputEl.addEventListener('focus', e => e.target.blur()) - 禁用鼠标选择:
user-select: none(注意兼容性,IE 需-ms-user-select) - 关键提醒:这些只是前端防护,后端仍需校验,因为用户可以绕过 JS 直接改 DOM











