码迷,mamicode.com
首页 > 移动开发 > 详细

H5 兼容IOS安卓的原生Js复制功能

时间:2020-06-08 14:24:47      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:自己   tor   ack   文本   middle   index   style   cti   选中   

H5 兼容IOS安卓的原生Js复制功能

<a @click="copyClick">复制</a>
 
copyView() {
  let temp = ’要复制的内容‘;
  return temp;
},
copyClick() {
   // 数字没有 .length 不能执行selectText 需要转化成字符串
  const textString = this.copyView();
  let input = document.querySelector(‘#copy-input‘);
  if (!input) {
    input = document.createElement(‘input‘);
    input.id = "copy-input";
    input.readOnly = "readOnly"; // 防止ios聚焦触发键盘事件
    input.style.position = "absolute";
    input.style.left = "-1000px";
    input.style.zIndex = "-1000";
    document.body.appendChild(input)
  }
  input.value = textString;
  // ios必须先选中文字且不支持 input.select();
  this.selectText(input, 0, textString.length);
  console.log(document.execCommand(‘copy‘), ‘execCommand‘);
  if (document.execCommand(‘copy‘)) {
    document.execCommand(‘copy‘);
    this.$vux.toast.text(‘地址已复制!‘, ‘middle‘)
  }
  input.blur();
},
// input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
selectText(textbox, startIndex, stopIndex) {
  if (textbox.createTextRange) { //ie
    const range = textbox.createTextRange();
    range.collapse(true);
    range.moveStart(‘character‘, startIndex); //起始光标
    range.moveEnd(‘character‘, stopIndex - startIndex); //结束光标
    range.select(); //不兼容苹果
  } else { //firefox/chrome
    textbox.setSelectionRange(startIndex, stopIndex);
    textbox.focus();
  }
}

 

H5 兼容IOS安卓的原生Js复制功能

标签:自己   tor   ack   文本   middle   index   style   cti   选中   

原文地址:https://www.cnblogs.com/qianxuebing/p/13065375.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!