优先使用 navigator.clipboard.writeText，它更可靠且无需聚焦；若不支持或处于非安全上下文（如 HTTP、file://），则回退到 document.execCommand('copy')，并确保 input 可聚焦、已选中内容。
点击按钮复制 input 值：用 document.execCommand('copy') 还是 navigator.clipboard.writeText？
现代浏览器基本都支持 navigator.clipboard.writetext，它比已废弃的 document.execcommand('copy') 更可靠、无需聚焦或创建临时元素。但要注意：该 api 要求页面处于安全上下文（https 或 localhost），否则会直接抛出 "permission denied" 错误。
如果你的 Layui 页面跑在 http://127.0.0.1 或本地文件（file://）协议下，navigator.clipboard 会失败——这时得回退到 execCommand 方案，且必须确保 input 元素可聚焦、已选中内容。
Layui 中绑定按钮点击事件的正确写法
Layui 的按钮通常不自带 ID，靠 class 或 lay-filter 区分。推荐用 layui.use('element') 后通过事件委托绑定，避免重复初始化或 DOM 未就绪问题。
- 不要直接写
onclick="copyInput()"，Layui 的模块化机制可能导致作用域丢失 - 用
element.on('click(filter)', callback)统一管理，filter 值如'btn-copy' - 确保目标
<input>有明确的id或class，方便document.getElementById或querySelector获取
完整可运行的复制逻辑（含兼容 fallback）
以下代码片段可直接插入 Layui 页面的 <script></script> 块中，假设你的 input 是 <input id="targetInput" value="Hello Layui">，按钮是 <button lay-filter="copy-btn">复制</button>：
layui.use(['element'], function(){
var element = layui.element;
element.on('click(copy-btn)', function(){
var input = document.getElementById('targetInput');
if (!input) return;
// 尝试现代 API
if (navigator.clipboard) {
navigator.clipboard.writeText(input.value)
.then(function() {
layer.msg('已复制', {icon: 1});
})
.catch(function(err) {
console.warn('clipboard.writeText 失败:', err);
fallbackCopy(input);
});
return;
}
// fallback：execCommand 方式
fallbackCopy(input);
});
});
function fallbackCopy(input) {
input.select();
input.setSelectionRange(0, 99999); // 兼容移动端
try {
document.execCommand('copy');
layer.msg('已复制', {icon: 1});
} catch (err) {
layer.msg('复制失败，请手动 Ctrl+C', {icon: 2});
}
}
注意：input.select() 在 iOS Safari 上可能无效，所以加了 setSelectionRange 提升兼容性；layer.msg 是 Layui 自带的提示组件，若未引入 layer 模块，需先 layui.use('layer')。
容易被忽略的两个坑
一是权限上下文：部署到非 HTTPS 的生产环境时，navigator.clipboard 会静默失败，控制台报错但不提示用户——务必加 catch 并提供 fallback；二是 input 的 readonly 或 disabled 属性会让 select() 失效，导致 execCommand 复制空字符串，此时应临时移除属性再恢复。
