document.execCommand("Copy") 在safari上失效怎么解决

Question

<textarea  id='copy-text' ></textarea>

var Url2=document.getElementById("copy-text");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
Message.success('复制成功');

这种复制方式在苹果手机和safari上失效，这个是不兼容的问题怎么处理啊

Answer 1

查阅相关文档，ios不支持input.select();
而且必须选中文字才能执行document.execCommand('copy')
否则会返回false
因此可以使用createTextRange选中文字后执行document.execCommand('copy')

    function 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

.

Answer 2

看看这个插件能不能帮到你https://clipboardjs.com/#exam...

Answer 3

这个方法对我有效，iOS12兼容测试OK，https://juejin.cn/post/696922...

copyText (text) {
    const input = document.createElement('input')
    document.body.appendChild(input)
    input.setAttribute('readonly', 'readonly')
    input.setAttribute('value', text)
    input.select()
    input.setSelectionRange(0, text.length)
    try {
      document.execCommand('copy')
    } catch (err) { }
    document.body.removeChild(input)
  }