jquery 一键复制功能，兼容苹果

最新推荐文章于 2024-11-04 19:57:32 发布

原创最新推荐文章于 2024-11-04 19:57:32 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #一键复制功能 #兼容苹果 #前端

前端代码专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一键复制功能在遇到苹果手机不兼容问题时的解决方案。原来使用select()方法在安卓上有效，但在苹果设备上失效。通过调整代码，实现了在苹果手机上也能完美复制的兼容性写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有做过一个项目，做好之后交给客户，客户用的是苹果手机，不料给我反馈回来一键复制功能不能使用。

这是我原来的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<body>
  微信: <input class="mytxt" id="xmid" value="13521423628" readonly="readonly" unselectable="on"></input>
  <span class="copyname">(点击复制)</span>
</body>
<script>
  // 一键复制 只针对安卓 select()不兼容苹果
  $('.copyname').click(function () {
      var dd = $('.mytxt');
      dd[0].select();
      document.execCommand("Copy");
      alert("复制成功！")
  });
</script>
</html>

对，这段代码可以实现一键复制的效果，但只在安卓手机上生效，因为select()在苹果上不生效。这也算是苹果的一个坑吧。

所以换了一种写法，兼容苹果的，试用了一下，在苹果手机上完美复制，有需要的朋友可以看下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
    微信: <input class="mytxt" id="xmid" value="13521423628" readonly="readonly" unselectable="on"></input>
    <span onClick="copyNum()">(点击复制)</span>
</body>
<script>
  // 思路：要想复制到剪贴板，必须先选中这段文字。
  function copyNum() {
      var NumClip = document.getElementById("xmid");
      var NValue = NumClip.value;
      var valueLength = NValue.length;
      selectText(NumClip, 0, valueLength);
      if (document.execCommand('copy', false, null)) {
          document.execCommand('copy', false, null) // 执行浏览器复制命令
          alert("复制成功!");
      } else {
          alert("不兼容");
      }
  }
  // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
  // 选择文本。createTextRange(setSelectionRange)是input方法
  function selectText(textbox, startIndex, stopIndex) {
      if (textbox.createTextRange) { //ie
          var 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();
      }
  }
</script>
</html>