更新！iOS >= 10

看起来在选择范围和一些小技巧的帮助下，可以直接复制到 iOS (>= 10) Safari 上的剪贴板。我个人在 iPhone 5C iOS 10.3.3 和 iPhone 8 iOS 11.1 上对此进行了测试。但是，似乎有一些限制，它们是：

1. 文本只能从<input>和<textarea>元素复制。
2. 如果保存文本的元素不在a 内<form>，则它必须在contenteditable.
3. 包含文本的元素不能是readonly（尽管您可以尝试，但这不是任何地方都记录的“官方”方法）。
4. 元素内的文本必须在选择范围内。

要满足所有这四个“要求”，您必须：

1. 将要复制的文本放入<input>or<textarea>元素中。
2. 保存元素的contenteditable和的旧值，readonly以便在复制后能够恢复它们。
3. 更改contenteditable到true和readonly到false。
4. 创建一个范围以选择所需的元素并将其添加到窗口的选择中。
5. 设置整个元素的选择范围。
6. 恢复以前的contenteditable和readonly值。
7. 运行execCommand('copy')。

这将导致用户设备的插入符号移动并选择您想要的元素中的所有文本，然后自动发出复制命令。用户将看到正在选择的文本，并会显示带有选择/复制/粘贴选项的工具提示。

现在，这看起来有点复杂，只是发出复制命令太麻烦了，所以我不确定这是 Apple 的预期设计选择，但谁知道......同时，这目前有效在 iOS >= 10 上。

话虽如此，像这样的polyfill可用于简化此操作并使其跨浏览器兼容（感谢@Toskan在评论中提供链接）。

工作示例

总而言之，您需要的代码如下所示：

function iosCopyToClipboard(el) {
    var oldContentEditable = el.contentEditable,
        oldReadOnly = el.readOnly,
        range = document.createRange();

    el.contentEditable = true;
    el.readOnly = false;
    range.selectNodeContents(el);

    var s = window.getSelection();
    s.removeAllRanges();
    s.addRange(range);

    el.setSelectionRange(0, 999999); // A big number, to cover anything that could be inside the element.

    el.contentEditable = oldContentEditable;
    el.readOnly = oldReadOnly;

    document.execCommand('copy');
}

请注意，el此函数的参数必须是 an<input>或 a <textarea>。

旧答案：以前的 iOS 版本

在iOS < 10上，Safari（实际上是安全措施）对Clipboard API有一些限制：

• 它copy仅在有效选择上触发事件，cut并且paste仅在聚焦的可编辑字段中触发事件。
• 它仅支持通过快捷键读取/写入操作系统剪贴板，不支持通过document.execCommand(). 请注意，“快捷键”是指一些可点击的（例如复制/粘贴操作菜单或自定义 iOS 键盘快捷键）或物理键（例如连接的蓝牙键盘）。
• 它不支持ClipboardEvent构造函数。

因此（至少到目前为止）不可能使用 Javascript 以编程方式复制 iOS 设备剪贴板中的某些文本/值。只有用户可以决定是否复制某些内容。

然而，可以通过编程方式选择某些内容，这样用户只需点击选择中显示的“复制”工具提示。这可以使用与上面完全相同的代码来实现，只需删除execCommand('copy')，这确实不起作用。

我搜索了一些解决方案，我找到了一个真正有效的解决方案：http : //www.seabreezecomputers.com/tips/copy2clipboard.htm

基本上，例子可能是这样的：

var $input = $(' some input/textarea ');
$input.val(result);
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
  var el = $input.get(0);
  var editable = el.contentEditable;
  var readOnly = el.readOnly;
  el.contentEditable = 'true';
  el.readOnly = 'false';
  var range = document.createRange();
  range.selectNodeContents(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  el.setSelectionRange(0, 999999);
  el.contentEditable = editable;
  el.readOnly = readOnly;
} else {
  $input.select();
}
document.execCommand('copy');
$input.blur();

这是我的跨浏览器实现

您可以通过运行下面的代码段来测试它

例子：

copyToClipboard("Hello World");

/**
 * Copy a string to clipboard
 * @param  {String} string         The string to be copied to clipboard
 * @return {Boolean}               returns a boolean correspondent to the success of the copy operation.
 * @see https://stackoverflow.com/a/53951634/938822
 */
function copyToClipboard(string) {
  let textarea;
  let result;

  try {
    textarea = document.createElement('textarea');
    textarea.setAttribute('readonly', true);
    textarea.setAttribute('contenteditable', true);
    textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
    textarea.value = string;

    document.body.appendChild(textarea);

    textarea.focus();
    textarea.select();

    const range = document.createRange();
    range.selectNodeContents(textarea);

    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    textarea.setSelectionRange(0, textarea.value.length);
    result = document.execCommand('copy');
  } catch (err) {
    console.error(err);
    result = null;
  } finally {
    document.body.removeChild(textarea);
  }

  // manual copy fallback using prompt
  if (!result) {
    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    const copyHotkey = isMac ? '⌘C' : 'CTRL+C';
    result = prompt(`Press ${copyHotkey}`, string); // eslint-disable-line no-alert
    if (!result) {
      return false;
    }
  }
  return true;
}

Demo: <button onclick="copyToClipboard('It works!\nYou can upvote my answer now :)') ? this.innerText='Copied!': this.innerText='Sorry :(' ">Click here</button>

<p>
  <textarea placeholder="(Testing area) Paste here..." cols="80" rows="4"></textarea>
</p>

注意：当它不是由用户启动时它不起作用，比如超时或任何异步事件！

它必须来自受信任的事件，例如从click按钮上的事件调用

问题： iOS Safari 只允许document.execCommand('copy')在contentEditable容器内显示文本。

解决方案：检测iOS Safari并contentEditable在执行之前快速切换document.execCommand('copy')。

以下功能适用于所有浏览器。使用CSS Selector或HTMLElement调用：

function copyToClipboard(el) {

    // resolve the element
    el = (typeof el === 'string') ? document.querySelector(el) : el;

    // handle iOS as a special case
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {

        // save current contentEditable/readOnly status
        var editable = el.contentEditable;
        var readOnly = el.readOnly;

        // convert to editable with readonly to stop iOS keyboard opening
        el.contentEditable = true;
        el.readOnly = true;

        // create a selectable range
        var range = document.createRange();
        range.selectNodeContents(el);

        // select the range
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        el.setSelectionRange(0, 999999);

        // restore contentEditable/readOnly to original state
        el.contentEditable = editable;
        el.readOnly = readOnly;
    }
    else {
        el.select();
    }

    // execute copy command
    document.execCommand('copy');
}

input { font-size: 14px; font-family: tahoma; }
button { font-size: 14px; font-family: tahoma; }

<input class="important-message" type="text" value="Hello World" />
<button onclick="copyToClipboard('.important-message')">Copy</button>

请检查我的解决方案。

它适用于 Safari（在 iPhone 7 和 iPad 上测试）和其他浏览器。

window.Clipboard = (function(window, document, navigator) {
    var textArea,
        copy;

    function isOS() {
        return navigator.userAgent.match(/ipad|iphone/i);
    }

    function createTextArea(text) {
        textArea = document.createElement('textArea');
        textArea.value = text;
        document.body.appendChild(textArea);
    }

    function selectText() {
        var range,
            selection;

        if (isOS()) {
            range = document.createRange();
            range.selectNodeContents(textArea);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            textArea.setSelectionRange(0, 999999);
        } else {
            textArea.select();
        }
    }

    function copyToClipboard() {        
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    copy = function(text) {
        createTextArea(text);
        selectText();
        copyToClipboard();
    };

    return {
        copy: copy
    };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');

https://gist.github.com/rproenca/64781c6a1329b48a455b645d361a9aa3 https://fiddle.jshell.net/k9ejqmqt/1/

希望能帮到你。

问候。