点击复制内容和全选
2019-02-25 本文已影响0人
BETOMElo
今天项目遇到一个需求:点击按钮,将制定内容复制到剪切板中。
看似简单,其实不然。
如果仅仅只为这一个功能引入插件,非常不爽,弃之。
于是用到了
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()"
解决。