我正在使用此功能将URL复制到剪贴板:
function CopyUrl($this){ var querySelector = $this.next().attr("id"); var emailLink = document.querySelector("#"+querySelector); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range); try { // Now that we've selected the anchor text, execute the copy command var successful = document.execCommand('copy', false, null); var msg = successful ? 'successful' : 'unsuccessful'; if(true){ $this.addClass("copied").html("Copied"); } } catch(err) { console.log('Oops, unable to copy'); } // Remove the selections - NOTE: Should use // removeRange(range) when it is supported window.getSelection().removeAllRanges(); }
在桌面浏览器上一切正常,但在iOS设备上无法正常运行,在iOS设备上我的函数成功返回,但是数据根本没有复制到剪贴板。是什么原因造成的,我该如何解决这个问题?
看起来像是在选择范围和一些小技巧的帮助下,可以直接复制到iOS(> = 10)Safari上的剪贴板。我在iPhone 5C iOS 10.3.3和iPhone 8 iOS 11.1上对此进行了亲自测试。但是,似乎存在一些限制,这些限制是:
<input>
<textarea>
<form>
contenteditable
readonly
要满足所有这四个“要求”,您将必须:
true
false
execCommand('copy')
这将导致用户设备的插入符号移动并选择所需元素中的所有文本,然后自动发出复制命令。用户将看到被选中的文本,并显示带有选择/复制/粘贴选项的工具提示。
现在,这看起来有点复杂,发出一个复制命令太麻烦了,所以我不确定这不是Apple的预期设计选择,但是谁知道…同时,这 目前可行在iOS > = 10上。
工作实例
总而言之,您需要的代码如下所示:
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此函数的参数必须为<input>或<textarea>。
el
在 iOS <10上,剪贴板API对Safari有一些限制(实际上是安全措施):
copy
cut
paste
document.execCommand()
ClipboardEvent
因此(至少到目前为止) ,无法使用Javascript在iOS设备上的剪贴板中以编程方式复制一些文本/值 。只有用户可以决定是否复制某些内容。
但是,可以通过编程方式选择某些内容 ,以便用户仅需点击所选内容上显示的“复制”工具提示。这可以通过使用与上面完全相同的代码来实现,只需删除execCommand('copy'),这实际上是行不通的。