美文网首页
点击复制内容和全选

点击复制内容和全选

作者: BETOMElo | 来源:发表于2019-02-25 14:36 被阅读0次

今天项目遇到一个需求:点击按钮,将制定内容复制到剪切板中。
看似简单,其实不然。
如果仅仅只为这一个功能引入插件,非常不爽,弃之。
于是用到了

document.execCommand("Copy")

复制方法参见:
项目还是以前的 遂jq

        // 复制投票链接
        $('#copy-link').on('click', function() {
            // 获取输入框
            var input = $('#copy-content');
            // 全选内容
            input.select();
            // 调用复制
            var isSuccess = document.execCommand("Copy");
            // 结果
            var text = '复制成功~' : '复制失败,请手动复制~';
            if (!isSuccess) {
                // 失败,调出输入框让用户手动复制
                input.addClass('copy-failed')
                input.focus();
            }else{
                // 全选时会呼起键盘 取消
                input.blur();
            }
            // 提示
            lxd_showToast(text,2);
        })

有个坑:刚开始pc和安卓都可以,只有ios不行,我以为ios不兼容。
但后来发现是input.select()没有选中内容所以复制失败了。
解决:
在input的html代码中添加属性:

onfocus="this.select();this.selectionStart = 0;this.selectionEnd = this.val().length; " onmouseup="event.preventDefault()"

解决。

相关文章

网友评论

      本文标题:点击复制内容和全选

      本文链接:https://www.haomeiwen.com/subject/ksqgyqtx.html