分类: 技术

iOS 下 JavaScript 实现复制功能

1. 背景

最近要实现一个小需求:iOS APP下,用户点击一个按钮,系统自动复制一段文本到系统剪贴板。通过查资料发现,iOS 出于安全性的考虑,对 Clipboard API 的使用有诸多限制。但是在 iOS 10 及以上版本中,可以通过 hack 的方式来实现该功能。

2. 方案

主要参考的是 SO 上的这个答案,在 iOS 10 及以上版本中,使用复制功能有以下限制:

  1. 只能复制<input><textarea>元素中的文本;
  2. 如果包含待复制文本的元素没有包含在一个<form>中,那它的contentEditable属性必须为true
  3. 第2步中的元素同时不能是readonly
  4. 待复制文本必须是被选中状态。

要满足上述4个限制,代码中需要做到:

  1. 把待复制文本放入<input><textarea>类型的元素 A 中;
  2. 保存 A 元素的contentEditablereadonly属性,以便复制完成后恢复现场;
  3. 设置 A 元素的contentEditabletruereadonly属性为false
  4. 创建一个range对象并挂载 A 元素;
  5. 获取窗口当前选中元素并清除,然后设置选中元素为第4步创建的range对象;
  6. 视情况恢复元素 A 的contentEditablereadonly属性;
  7. 执行document.execCommand('copy')

最终实现代码如下:

上述代码中需要注意:

  1. 不能将eldisplay设置为none,或者将其visibility设置为hidden,所以这里将它的透明度设置为0;
  2. 设置元素被选中后,Safari 下键盘会弹出,所以在复制后执行el.blur()来使其失去焦点,但页面在某些浏览器下还是会有个轻微抖动;
  3. 通过执行el.select()也能使其获得焦点,但该方法在 Mac 下 Chrome 中有效,在 iOS 下无效

以上就是 iOS 下复制功能的简单实现,注意在 iOS 10 以下的版本中,上述代码也是无效的

注:转载注明出处并联系作者,本文链接:https://nodefe.com/ios-js-copy/

发表评论

评论