layui中textarea的placeholder直接使用原生HTML属性,无需form.render()初始化;layedit富文本无原生placeholder,靠CSS伪元素模拟;校验失败时避免用空字符串清空值以防placeholder消失;移动端需通过CSS修正渲染异常。

layui文本域(textarea)怎么设 placeholder
layui 本身不给 textarea 组件额外封装 placeholder 功能,它直接复用原生 HTML 的 placeholder 属性。只要你在 DOM 里写了,浏览器就渲染;没写,就不会有提示文字。
常见错误是以为要走 layui 的表单模块初始化才能生效——其实不用。form.render() 不影响 placeholder 显示,它只管验证、禁用、选中等行为。
- 直接在
<textarea>标签上写placeholder="请输入内容" - 服务端模板或 JS 拼 HTML 时,确保该属性值做了 HTML 转义(比如用户输入含
<或",得转成和 <code>") - 别用 JS 动态 setAttribute 写
placeholder后再调form.render()—— 这样做多余,且可能因渲染时机导致闪烁
layui富文本编辑器 layedit 的“默认提示”不是 placeholder
如果你用的是 layedit.create() 初始化的富文本,它底层是 iframe + contenteditable,没有原生 placeholder。所谓“默认提示文字”,其实是靠 CSS 伪元素模拟的占位符,且只在内容为空时显示。
要让它出现,得满足两个条件:
-
textarea初始值必须为空字符串(<textarea id="edit"></textarea>),不能带空格或换行 - 别提前给编辑器容器加
height或min-height—— layedit 会根据内容自动撑高,否则伪元素定位偏移,提示看不见
如果想自定义这段文字,只能改 CSS:.layedit-iframe::before 里的 content 值,但注意:不同版本类名可能微调,且移动端兼容性差,不推荐硬改。
表单验证失败后 placeholder 消失?那是你清空了值
很多人发现:提交失败、校验不通过后,textarea 里的 placeholder 看不见了。这不是 layui 的 bug,而是你代码里执行了类似 elem.val('') 或 form.val('formFilter', { content: '' }),把内容清空的同时也触发了 placeholder 隐藏逻辑(浏览器行为)。
真正要保留提示,应该:
- 校验失败时不重置字段值,只 focus 并弹提示
- 如果必须重置,用
elem.val(null)或elem.val(undefined),而不是空字符串 —— 多数浏览器对null/undefined仍保持 placeholder 显示 - 避免在
form.on('submit')回调里无条件清空所有字段
移动端 textarea placeholder 显示异常怎么办
iOS Safari 和部分安卓 WebView 对 textarea 的 placeholder 渲染有差异:字体偏小、垂直居中错位、软键盘弹起后消失。这不是 layui 导致的,但叠加 layui 的样式(比如 .layui-textarea 的 padding 或 line-height)会放大问题。
稳妥做法:
- 给
textarea单独加 class,用 CSS 强制修正:line-height: 1.5; padding-top: 8px; - 避免用
height固定高度,改用min-height+max-height配合overflow-y: auto - 测试时真机连 Safari Web Inspector,别只看 Chrome 模拟器
复杂点在于:placeholder 是浏览器原生行为,Layui 不接管也不修复它。你能控制的,只有 HTML 结构、初始值和周边样式。其他都得靠实测兜底。


















