HTML5复制设置：user-select与JS实现方法
一分耕耘，一分收获！既然打开了这篇文章《HTML5复制设置方法：user-select与JS实现》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！
可使用三种方法实现HTML5文本复制：一、CSS user-select: all 实现一键全选后快捷键复制；二、JavaScript execCommand('copy') 动态创建临时textarea完成即时复制；三、现代Clipboard API的writeText()异步复制，需HTTPS/localhost环境。
如果您希望在 HTML5 页面中实现用户能够便捷地复制某段文本内容，则可以通过 CSS 的 user-select 属性控制文本可选性，或借助 JavaScript 的 execCommand（已废弃但仍广泛支持）触发复制操作。以下是具体实施方法：
一、使用 CSS user-select: all 实现全选后复制
该方法不执行自动复制，而是将指定元素内的文本设为“一键全选”，用户按 Ctrl+C（或 Cmd+C）即可完成复制。它通过改变用户选择行为提升操作效率，适用于静态展示型文本区域。
1、在 HTML 中定义需支持复制的容器，例如：
2、为该容器添加内联样式或 CSS 类，设置 user-select: all，并兼容各浏览器前缀：
3、添加如下 CSS 规则：#copy-target {
user-select: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
}
4、此时点击该元素任意位置，整个内容将被高亮选中，用户无需拖动鼠标即可直接按快捷键复制。
二、使用 document.execCommand('copy') 执行即时复制
该方法通过 JavaScript 捕获用户触发事件（如按钮点击），动态创建临时输入框、注入文本、选中并调用 execCommand('copy')，从而实现“点击即复制”。它不依赖用户手动操作，适合交互式控件。
1、在页面中添加一个触发按钮，例如：。
2、编写 JS 逻辑：获取目标文本内容，创建