Layui layer.prompt如何设置多行文本输入框（textarea）-Layui教程-PHP中文网

layer.prompt 不支持多行输入，应改用 layer.open 自定义 textarea 弹窗；需设置 area 控制尺寸，yes 回调中用 JS 获取值，避免 CSS hack 或 input 改造。

layui layer.prompt如何设置多行文本输入框（textarea）

layer.prompt 默认只支持单行输入，无法直接改成 textarea

因为 layer.prompt 内部固定使用，不提供原生多行配置项。强行改 DOM 或 CSS 无法触发 layer 的值获取逻辑，提交时仍会取空值或截断。

用 layer.open + 自定义 content 模拟 prompt 效果

这是最可靠、兼容性最好的做法：放弃 layer.prompt，改用 layer.open 手动构造带的弹窗，并复现确认/取消行为。

把表单 HTML 字符串传给 content 选项，注意包裹在 中避免 layer 解析异常
用 area 显式设置宽高（如 ['500px', '300px']），否则 textarea 高度不可控


在 yes 回调里用 document.getElementById 或 $('textarea').val() 取值，别依赖 layer.prompt 的第二个参数
记得在 cancel 回调里手动清理可能的残留 DOM 或事件监听
layer.open({
  title: '请输入内容',
  content: '<div style="padding:20px;"><textarea id="multiInput" rows="5" style="width:100%;border:1px solid #ccc;padding:6px;"></textarea></div>',
  area: ['500px', '300px'],
  btn: ['确定', '取消'],
  yes: function(index, layero) {
    const val = document.getElementById('multiInput').value.trim();
    if (val) {
      console.log('用户输入：', val);
      layer.close(index);
    }
  }
});

如果必须用 layer.prompt，只能 hack input 样式（不推荐）
有人尝试用 CSS 把  拉高并设 white-space: pre-wrap，但实际无效——input 本质不支持换行，Enter 键会直接触发表单提交或关闭弹窗，且移动端软键盘回车键行为不可控。

设置 style="height:100px; line-height:1.5;" 看似变高，但用户仍无法换行输入
监听 keydown 拦截 Enter 会破坏 layer 原有交互逻辑，容易导致关闭失败或重复提交
layer 3.x 的 skin 和 offset 参数对输入框内部结构无影响，不能绕过这个限制

注意 layer 版本差异和 textarea 初始化时机
layer 2.x 和 3.x 在 content 渲染时机上略有不同：3.x 的 success 回调比 2.x 更晚触发，若需自动聚焦或预填内容，务必放在这里操作，否则 getElementById 可能返回 null。

预填内容不要写死在 HTML 字符串里（如 xxx），应在 success 里用 JS 赋值，确保 DOM 已挂载
移动端 Safari 下，textarea 自动聚焦可能被拦截，需用户首次点击才激活，这是浏览器策略，无法通过 layer 配置绕过
如果项目已全局引入 jQuery，用 $(layero).find('textarea') 比原生 getElementById 更稳妥，避免 ID 冲突



layer 的 prompt 设计初衷就是轻量单行输入，硬改多行会踩进 DOM 生命周期、事件绑定、跨端兼容三重坑。真要多行，老老实实用 open + textarea，控制权在自己手里。