h5实现一键复制到粘贴板兼容ios

最新推荐文章于 2023-09-19 16:38:07 发布

张小岛

最新推荐文章于 2023-09-19 16:38:07 发布

阅读量855

点赞数

分类专栏： H5一键复制文章标签： h5

本文链接：https://blog.csdn.net/qq_30949371/article/details/107333644

版权

H5一键复制专栏收录该内容

1 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>h5实现一键复制到粘贴板 兼容ios</title>
</head>
<body>
<h3>h5实现一键复制到粘贴板 兼容ios</h3>
<button onclick="copyText('h5实现一键复制到粘贴板 兼容ios')">copy</button>
<script>
  const copyText = (text) => {
    // 数字没有 .length 不能执行selectText 需要转化成字符串
    const textString = text.toString();
    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();
    selectText(input, 0, textString.length);
    if (document.execCommand('copy')) {
      document.execCommand('copy');
      alert('已复制到粘贴板');
    }else {
      console.log('不兼容');
    }
    input.blur();

    // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
    // 选择文本。createTextRange(setSelectionRange)是input方法
    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();
      }
    }
  };


  // 复制文字

  // 必须手动触发 点击事件或者其他事件，不能直接使用js调用！！！
//  copyText('h5实现一键复制到粘贴板 兼容ios')
  /*兼容性补充：
   移动端：
   安卓手机：微信（chrome）和几个手机浏览器都可以用。
   苹果手机：微信里面和sarafi浏览器里也都可以，
   PC:sarafi版本必须在10.2以上，其他浏览器可以.
   兼容性测试网站：https://www.caniuse.com/*/
</script>
</body>
</html>