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);
                })
            })
        })