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