h5页面实现一键复制到粘贴板并且兼容ios
今天突然接到一个需求,需要做个订单号复制功能,然后代码如下:```javascriptCopyOrderSerialId() {var system = navigator.userAgent;//获取系统信息//苹果if (system.match(/(iPhone|iPod|iPad);?/i)) {var ...
·
今天突然接到一个需求,需要做个订单号复制功能,然后代码如下:
CopyOrderSerialId() {
var system = navigator.userAgent;//获取系统信息
//苹果
if (system.match(/(iPhone|iPod|iPad);?/i)) {
window.getSelection().removeAllRanges(); //将页面所有的文本区域都从选区中移除
var copyDOM = document.getElementById("orderId-copy"); //要复制文字的节点
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(copyDOM);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
var successful = document.execCommand('copy');
try {
var msg = successful ? '成功' : '失败';
this.$toast("复制"+msg );
} catch (err) {
// this.$toast("复制失败,请从事");
}
// 移除选中的元素
window.getSelection().removeAllRanges();
}
// 安卓
if (system.indexOf('Android') > -1) {
var orderUrl = this.orderData.OrderSerialId;// 获取订单号
var newInput = document.createElement("input");// 这里的逻辑就是新建立一个input标签,
newInput.value = orderUrl +'';// 把订单号设置为input的value值
document.body.appendChild(newInput);// 把input添加到body中
newInput.select(); // select 选中input里面的所有文本内容
document.execCommand("Copy"); // 执行浏览器复制命令
document.body.removeChild(newInput); // 最近需要销毁
this.$toast("复制成功");//调用引入的轻提示插件告诉用户复制成功
}
},
注:ios下不能执行document.execCommand(‘copy’),所以要做ios兼容问题;
更多推荐
已为社区贡献2条内容
所有评论(0)