【H5】使⽤h5实现复制粘贴功能
⽅案⼀：可满⾜⼤部分浏览器正常使⽤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>copy example</title>
</head>
<body>
<p>
<button class="copy">Copy</button>
</p>
<p>
<textarea cols="50" rows="10" placeholder="这这⾥粘贴试⼀下吧!"></textarea>
</p>
<script>
var copyBtn = document.querySelector('.copy')
// 点击的时候调⽤ copyTextToClipboard() ⽅法就好了.
copyTextToClipboard('随便复制点内容试试')
}
function copyTextToClipboard(text) {
var textArea = ateElement("textarea")
textArea.style.position = 'fixed'
p = 0
textArea.style.left = 0
textArea.style.width = '2em'
textArea.style.height = '2em'
textArea.style.padding = 0
textArea.style.border = 'none'
textarea中cols表示textArea.style.outline = 'none'
textArea.style.boxShadow = 'none'
textArea.style.background = 'transparent'
textArea.value = text
document.body.appendChild(textArea)
textArea.select()
try {
var msg = Command('copy') ? '成功' : '失败'
alert('复制内容 ' + msg);
} catch (err) {
alert('不能使⽤这种⽅法复制内容');
}
veChild(textArea)
}
</script>
</body>
</html>
⽅案⼆：兼容苹果 iphone js 复制功能 clipboard.js
<script src="你的路径clipboard.min.js"></script>
<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> 代码改变世界 </textarea> <!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Cut to clipboard
</button>
<script>
var clipboard = new Clipboard('.btn');
<('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text); console.info('Trigger:', e.trigger); alert("复制成功");
e.clearSelection();
});
<('error', function(e) { ('Action:', e.action); ('Trigger:', e.trigger); });
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。