JavaScript复制内容到剪贴板

移动端 需要复制内容到剪贴板时,

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);
                })
            })
        })
扫描二维码关注公众号,回复: 2134669 查看本文章

猜你喜欢

转载自www.cnblogs.com/echolife/p/9298815.html
今日推荐