https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<pre class="source" contenteditable>export class Pizza extends Food {
constructor (private name: string) {}
}</pre>
<button type="button" class="copy">Copy</button>
<button type="button" class="paste">Paste</button>
<div class="destination"></div>
<style>
.source {
background: #15181e;
text-align: left;
max-width: 95%;
margin: 25px auto;
font-size: 16px;
color: #fff;
padding: 25px;
border-radius: 5px;
box-sizing: border-box;
}
</style>
`;
const init = () => {
const source = document.querySelector('.source');
const destination = document.querySelector('.destination');
const copy = document.querySelector('.copy');
const paste = document.querySelector('.paste');
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(source.innerText);
console.log('Copied!');
} catch (e) {
console.log('Failed to copy!', e);
}
};
const pasteToClipboard = async () => {
try {
const text = await navigator.clipboard.readText();
console.log(`Paste... ${text}`);
destination.innerText = text;
} catch (e) {
console.log('Failed to paste!', e);
}
};
copy.addEventListener('click', copyToClipboard);
paste.addEventListener('click', pasteToClipboard);
document.addEventListener('copy', (e) => {
e.preventDefault();
e.clipboardData.setData(
'text/plain',
e.target.innerText.replace('Pizza', 'Burger')
);
});
document.addEventListener('paste', (e) => {
e.preventDefault();
const text = e.clipboardData.getData('text/plain');
destination.innerText = text;
});
};
if ('clipboard' in window.navigator) {
init();
}
标签:copy,const,text,clioboard,source,HTML,Async,document,paste From: https://www.cnblogs.com/Answer1215/p/16791906.html