移动端 需要复制内容到剪贴板时,
clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容,
完成一键复制淘口令的功能。
注意使用clipborad.js时,input 元素不可隐藏,可以设置元素位置在可视区域之外。
参考链接:
https://github.com/axuebin/articles/issues/26
实现代码:
<input id="taokouling" value="€1222€">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#taokouling" >复制淘口令</button>
document.querySelector('.btn').addEventListener('click', () => { var clipboard = new Clipboard('.btn');
clipboard.on('success', e => {
// alert(e.text)
$(".pop").fadeIn(500)
e.clearSelection();
})
clipboard.on('error', e => {
// 不支持复制
// alert('浏览器不支持自动复制,请手动复制微信号') var btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
var input = document.createElement('input');
input.setAttribute('readonly', 'readonly');
input.setAttribute('value', '€Up2jba6wlck€');
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
if (document.execCommand('copy')) {
document.execCommand('copy');
$(".pop").fadeIn(500)
}
else{
alert('复制失败');
}
document.body.removeChild(input);
})
})
})