H5页面在手机端如何实现复制粘贴板功能

Question

在页面上有一个P标签，有一个button按钮。点击button按钮后系统可以复制P标签里的文本内容。我用的clipboard.js，发现在ios上不兼容。有没有什么更好的办法去实现，并且能否判断到这个复制的文本内容是否成功复制。

Answer 1

stackoverflow看到这么一个回答，ios上的不兼容使用了一个很机智的trick。。。：

ZeroClipboard is the best cross-browser solution I've found:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new
  ZeroClipboard(document.getElementById('copy'));
</script>

If you need non-flash support for iOS you just add a fall-back:

clip.on('noflash', function(client, args) {
    $("#copy").click(function() {
        var txt = $(this).attr('data-clipboard-text');
        prompt("Copy link, then click OK.", txt);
    });
});

http://zeroclipboard.org/

https://github.com/zeroclipbo...

原答案地址

Answer 2

同求 试了很多 移动端总不兼容

Answer 3

ios端现在也可以实现了哦。
ios不支持input.select();
但是可以使用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

.