Layui中layer.prompt不支持多行输入,需用layer.open自定义textarea弹层或通过success回调替换input为textarea,或封装multiPrompt函数返回Promise实现多行输入。

在Layui中使用layer.prompt默认只提供单行输入框,若需用户输入多行内容(如备注、说明、长文本),必须手动替换为textarea元素,不能依赖prompt的type参数直接实现。
用layer.open自定义弹出层替代prompt
第一步:调用layer.open创建新弹层,不使用layer.prompt。
第二步:在content选项中写入包含textarea的HTML字符串,设置rows控制行数。
第三步:在弹层底部添加「确定」「取消」按钮,绑定点击事件获取textarea值。
第四步:调用layer.close关闭弹层,避免重复点击触发多次提交。
复用prompt样式但替换input为textarea
方法一:利用layer.prompt的success回调修改DOM
执行layer.prompt({title: '请输入内容', value: ''})后,在success函数里定位到内部的input元素,用textarea替换它,并保留原有class和name属性。这一步必须在弹层完全渲染后操作,否则找不到节点。
注意:Layui 2.8+版本中,prompt内部input包裹在class="layui-layer-input"的div内,替换时需同步移除旧input并插入新textarea,否则样式错乱。
方法二:直接构造layer.config配置对象
设置type: 1(页面层),content设为'',再通过btn绑定确认逻辑。此时需手动处理回车提交、焦点自动聚焦、ESC关闭等交互,layer.prompt自带的行为全部失效。
保持prompt调用习惯的封装方案
写一个自定义函数multiPrompt,接收title、rows、value等参数,内部调用layer.open,返回Promise以便await获取结果。
函数体中构建textarea DOM,监听确认按钮点击,读取elem.val(),校验非空后resolve值,点击取消则reject('cancel')。
【务必在textarea外层加form标签并阻止submit默认行为,否则回车会刷新页面】
调用时写multiPrompt('填写详情', {rows: 6, value: '默认内容'})即可,语义清晰且复用性强。











