Clipboard API All In One

Clipboard API All In One

click copy

三种方法可以实现剪贴板操作

1. Document.execCommand()

2. 异步的 Clipboard API

3. copy 事件和 paste 事件 & cut 事件

document.execCommand 👎

document.execCommand('copy');
// true


document.execCommand('copy');
// 复制
document.execCommand('cut');
// 剪切
document.execCommand('paste');
// 粘贴

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

navigator.clipboard

navigator.clipboard
.readText()
.then(clipText => document.querySelector(".editor").innerText += clipText);

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

demos

授权

测试

OK ✅

text/plain = Offer 提速

text/html = <meta charset='utf-8'><h1 class="h2 mb-3" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem !important; font-weight: 500; line-height: 1.2; font-size: calc(1.325rem + 0.9vw); color: rgb(33, 37, 41); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a href="https://segmentfault.com/a/1190000041634339" class="text-body" style="box-sizing: border-box; color: rgb(0, 120, 75); text-decoration: none; --bs-text-opacity:1;">Offer 提速</a></h1>

text/plain = First Blog: Published Date

text/html = <meta charset='utf-8'><h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-weight: normal; color: rgb(21, 153, 87); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a id="welcome-to-github-pages" target="_blank" class="anchor" href="https://mobile.xgqfrms.xyz/pages/001.html" aria-hidden="true" style="box-sizing: border-box; background-color: transparent; color: rgb(30, 107, 184); text-decoration: none; margin-top: 0px;"><span class="octicon octicon-link" style="box-sizing: border-box; margin-top: 0px;">First Blog:</span><span> </span></a><span id="p_date" style="box-sizing: border-box; display: inline-block; font-size: 16px; color: rgb(255, 0, 0);">Published Date</span></h2>

text/plain = First Blog: Published Date

text/html = <meta charset='utf-8'><h2 style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-weight: normal; color: rgb(21, 153, 87); font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a id="welcome-to-github-pages" target="_blank" class="anchor" href="https://mobile.xgqfrms.xyz/pages/001.html" aria-hidden="true" style="box-sizing: border-box; background-color: transparent; color: rgb(30, 107, 184); text-decoration: none; margin-top: 0px;"><span class="octicon octicon-link" style="box-sizing: border-box; margin-top: 0px;">First Blog:</span><span> </span></a><span id="p_date" style="box-sizing: border-box; display: inline-block; font-size: 16px; color: rgb(255, 0, 0);">Published Date</span></h2>

APIs

copy & paste & cut

https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event

https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event

refs

https://www.cnblogs.com/xgqfrms/p/17087073.html#5145592

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---