Clipboard 接口实现了 Clipboard API,如果用户授予了相应的权限,其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中,Clipboard API 可用于实现剪切、复制和粘贴功能。
参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard
Clipboard API 包括两个主要的接口:Clipboard 和 DataTransfer。Clipboard 接口用于操作系统剪贴板(例如 Windows 或 macOS 中的剪贴板),它包含以下方法:
- writeText(text: string): Promise
:将文本复制到剪贴板。 - readText():Promise
:从剪贴板读取文本。
以下示例可直接使用,亲测有效
1、以下是一个使用 Clipboard 接口将文本剪贴板复制粘贴的示例:更多参考
<script>
// 将文本复制到剪贴板
navigator.clipboard
.writeText("Hello, World! Write")
.then(() => console.log("Text copied to clipboard"))
.catch((error) => console.error("Failed to copy text: ", error));
// 从剪贴板中读取数据
navigator.clipboard
.readText()
.then((text) => console.log("Text read from clipboard: ", text))
.catch((error) => console.error("Failed to read text from clipboard: ", error) );
</script>
2、实例Clipboard对象,使用html标签 data-clipboard-target ,需要点击触发。
<script type=\'text/javascript\' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>
<div id="foo">独孤那点事儿</div>
<a class="btn" href="javascript:" data-clipboard-target="#foo" rel="noopener noreferrer">复制</a>
<script type="text/javascript">
var clipboard = new Clipboard(\'.btn\');
clipboard.on(\'success\', function(e) {
console.info(\'Success---:\', e);
e.clearSelection();
});
clipboard.on(\'error\', function(e) {
console.error(\'Error---:\', e.action);
});
</script>
<script type="text/javascript">
function copyText()
{
var text = document.getElementById("mytext").innerText;
var einput = document.createElement(\'input\');
einput.value = text;
document.body.appendChild(einput);
einput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
einput.className = \'einput\';
document.body.removeChild(einput);
alert(\'复制成功\');
}
</script>
<div cols="20" id="mytext">I am text: 12345678</div>
<input type="button" onClick="copyText()" value="点击复制代码" />
无感触发复制粘贴效果: 创建一个textarea元素,将要写入的内容放入textarea里,然后选择input,再调用浏览器的复制命令,将textarea里的内容复制,最后隐藏或移除textarea。
<script>
var text = \'ΦX-9hAf2vYA7jBEdcΦ\';
if (navigator.clipboard) { // clipboard api 复制 (安全域名下使用)
navigator.clipboard.writeText(text);
} else { // (不安全域名下使用)
var textarea = document.createElement(\'textarea\');
document.body.appendChild(textarea);
// 隐藏此输入框
textarea.style.position = \'fixed\';
textarea.style.clip = \'rect(0 0 0 0)\';
textarea.style.top = \'10px\';
// 赋值
textarea.value = text;
// 选中
textarea.select();
// 复制
document.execCommand(\'copy\', true);
// 移除输入框
document.body.removeChild(textarea);
}
</script>
注:
1、调用 navigator.clipboard 的 API 必须是 https安全协议 访问,否则浏览器将不会暴露出该 API 调用时会报错失败,其次如果想访问剪切板的内容的话,需要两个条件: 第一必须是活动界面也就是说如果你切换到其他界面时,在访问原本界面的剪切板信息将不会执行;第二必须用户开启访问剪切板权限,否则不给访问。结合这些用户操作的安全性也得到了大大地提升~
2、报错 DOMException: Document is not focused.这是浏览器的安全控制,需要用户主动触发;
Hello to all, it's really a good for me to pay
a visit this site, it consists of important Information.
I'm not sure where you are getting your information, but good topic.
I needs to spend some time learning much more or understanding more.
Thanks for excellent information I was looking for this info for my mission.
Appreciation to my father who shared with me on the topic of this blog, this weblog
is really remarkable.
When some one searches for his necessary thing, therefore he/she wishes to be available
that in detail, therefore that thing is maintained over here.
I have learn a few good stuff here. Certainly price bookmarking for revisiting.
I surprise how so much effort you place to make this type
of wonderful informative site.
Spot on with this write-up, I seriously believe this
site needs a lot more attention. I'll probably be back
again to read more, thanks for the info!
Great web site you have here.. It's hard to find quality writing like yours these days.
I really appreciate people like you! Take care!!