Layui中实现密码输入prompt层需自定义HTML内容并接管事件：用layer.open创建type:1层，内含password input和确认按钮，在success回调绑定点击事件获取值；或修改layer.prompt生成的input类型为password，需setTimeout延迟操作；亦可封装pwdPrompt函数复用。

在Layui中实现带密码输入框的prompt层，需绕过layer.prompt默认仅支持普通文本输入的限制，通过自定义content手动构建密码输入框并接管输入值回传逻辑。

使用layer.open自定义密码prompt层

第一步：引入Layui CSS和JS资源，确保已正确加载layer模块。

第二步：调用layer.open，设置type: 1（页面层），content为一个包含密码input的HTML字符串，同时关闭遮罩点击关闭和ESC关闭等干扰行为。

第三步：在content中写入，并添加确认按钮：确定。

第四步：在success回调中绑定按钮点击事件，获取密码框值后调用layer.closeAll()关闭弹层，并将密码值传给后续业务函数；【务必在success中绑定事件，否则DOM未渲染完成会导致getElementById失败】。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

复用layer.prompt结构但替换input类型

方法一：利用layer.prompt的btn参数和yes回调，先调用layer.prompt获得基础结构，再立即用原生JS修改其内部input的type属性为password。

执行layer.prompt({title: '请输入密码', value: '', btn: ['确定']}, function(value, index, elem){...})后，在回调函数外立即执行setTimeout(() => {document.querySelector('.layui-layer-content input').setAttribute('type', 'password');}, 10)；【必须加setTimeout延迟，否则DOM尚未挂载完成，querySelector找不到input】。

方法二：不依赖layer.prompt，直接用layer.msg配合手动创建密码框——更可控但需自行处理样式对齐和按钮布局。

封装成可复用的pwdPrompt函数

定义函数pwdPrompt(title = '请输入密码', callback) { const id = 'layer-pwd-' + Date.now(); const content = `

取消 确定

`; layer.open({type: 1, title: title, content: content, area: ['320px', 'auto'], shadeClose: false, closeBtn: 1}); window.confirmPwd = function(inputId) { const val = document.getElementById(inputId).value; layer.closeAll(); typeof callback === 'function' && callback(val); delete window.confirmPwd; }; }。

调用时只需pwdPrompt('管理员密码', function(pwd) { console.log(pwd); }); 这一步操作起来很简单，直接把函数复制进JS里就能用。