copyText()安卓,ios11,ios12都可用 ,并且不弹起输入键盘
// 复制copyText
function copyText(text) {
var input = document.createElement("input");
var currentFocus = document.activeElement;
document.body.appendChild(input);
input.readOnly = 'readonly';
input.value = text;
input.focus();
if (input.setSelectionRange)
input.setSelectionRange(0, input.value.length);
else
input.select();
try {
var flag = document.execCommand("copy");
} catch (eo) {
var flag = false;
}
input.blur();
document.body.removeChild(input);
currentFocus.focus();
currentFocus.blur();
return flag;
}
 
 

在 iOS 10 及以下版本 中,使用复制功能有以下限制:

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

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

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

最终实现代码如下:

function copystr(str) {
var el = document.createElement('input');
el.value = str;
el.style.opacity = '0';
document.body.appendChild(el);
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;
var flag = document.execCommand('copy');
el.blur();
return flag;
}
 
测试,失败,无效,后期更新 

ios9.3.3版本下 document.execCommand("copy") 失败的更多相关文章

  1. LayaAir疑难杂症之三:1.7版本click()、execCommand('copy')函数不生效

    问题描述 在使用Laya1.7引擎开发H5游戏时,引入Js原生函数click( ),模拟一次点击事件,发现无效.在使用Laya1.7引擎开发H5游戏时,引入Js原生函数execCommand('cop ...

  2. Javascript中document.execCommand()的用法

    document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令 ...

  3. document.execCommand 常用的方法

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式: document.execCommand(sCommand[,交互方式, 动态参数]) , ...

  4. javascript的document.execCommand(转)

    document.execCommand()方法处理html数据时常用语法格式如下: 代码: document.execCommand(sCommand[,交互方式, 动态参数]) 其 中:sComm ...

  5. document.execCommand()函数可用参数解析

    隐藏在暗处的方法-execCommand() 关键字: javascript document document.execCommand()方法可用来执行很多我们无法实现的操作. execComman ...

  6. 前端复制功能的若干 -- document.execCommand()

    最近涨停科技公司实习,由于backend基础太弱...强行前端了一把..搞了两周才搞下页面里copy的功能,期间有些琐碎,恐忘,记录在此. 目前copy主流有四种方式:ZeroClipboard,Cl ...

  7. document.execCommand()的用法小记

    项目中遇到金额输入框限制只能输入数字,输入特殊字符或者字母汉字时间隔不到1秒内容就会自动清空.跟正则纠缠多年的我初次见到,很是神奇-.- 代码实现: <input type="text ...

  8. JS document.execCommand实现复制功能(带你出坑)

    最近项目中需要实现功能:点击button,复制input框的值: 我使用的是 document.execCommand('copy')的方法: 但是很郁闷的是,始终实现不了功能:代码如下 HTML代码 ...

  9. JavaScript:document.execCommand()的用法

    document.execCommand()的用法小记 一.语法 execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用. 如下格式:document.ex ...

随机推荐

  1. hdu 1358 Period(KMP入门题)

    Period Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  2. Ubuntu的网络共享

    实际场景 公司项目中遇到一个场景:Ubuntu的主机上装了个4G卡(USB模式),需要将这个4G网共享给一个AP,使得所有连接AP的移动设备都可以通过4G上外网 方法很简单: 1. 将4G网口之外的另 ...

  3. 【JZOJ3635】【BOI2012】Peaks

    ╰( ̄▽ ̄)╭ 有一个居住在多山岛屿的登山家,已经攀上了一座山峰,并且要攀爬另外一座更高的山峰. 更精确地说,岛上的每一点都有一个大于零的海拔(海面的海拔为零),并且如果登山家位于海拔Ei的山峰上,那 ...

  4. npm上面实用的第三方工具包

    npm上面实用的第三方工具包 live-server 作用:为页面提供实时刷新重载的功能,并且能提供一个http服务器 官方地址:https://www.npmjs.com/package/live- ...

  5. 源码:自己用Python写的iOS项目自动打包脚本

    http://www.cocoachina.com/ios/20160307/15501.html 什么?又要测试包! 做iOS开发几年了,每天除了码代码,改Bug之外,最让我烦恼的莫过于测试的妹子跑 ...

  6. Spring4.x 基础知识点

    # Spring4.x 基础知识点## 第二章 快速入门- 一般情况下,需要在业务模块包下进一步按分层模块划分子包,如user\dao.user\service.viewspace\dao.views ...

  7. LeetCode136 Single Number, LeetCode137 Single Number II, LeetCode260 Single Number III

    136. Single Number Given an array of integers, every element appears twice except for one. Find that ...

  8. eclipse忽略js文件报错

    eclipse中js文件报错的情况,或许大家早已习以为常了,那么有什么好的方法可以将其忽略掉呢?如果你也在寻找此问题,那么本文或许可以帮助到你忽略某个js文件报错的方法: Project Proper ...

  9. cloud-music

    非常感谢那些无私开源的程序员,希望我也能够有能力像你们那样,开源很多很有意思的东西~~ //index.html <!DOCTYPE html> <html> <head ...

  10. @codeforces - 715E@ Complete the Permutations

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定两个排列 p, q,他们中的有些位置被替换成了 0. 两个排 ...