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. HTML文档与盒子模型

    关于HTML 百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言. 为什么叫用于“描述”网页文档的“标记”语言呢? ...

  2. 在VMware安装Windows server 2003操作系统帮助文档

    在VMware上安装Windows server 2003操作系统,及VMware上三种网络连接模式(以VMware 10为例) 一.在Windows上安装VMware 10虚拟机软件 1.首先在Wi ...

  3. 关于chrome浏览器的帐号密码自动填充以及出现的黄色背景色填充问题

    不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意.然而在近期的项目中有遇到了这个问题,最为一 ...

  4. Vue调试神器之Vue.js devTools

    Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率. 安装 1.打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可.贵宾传送阵,请 ...

  5. 【花般绽放】balibali

    先放项目地址:https://github.com/1067011734/balibali 感谢无私的程序员们分享 我们边看效果边看代码 项目运行出来的效果 先看Home页面 轮播 //src\pag ...

  6. LeetCode Top 100 Liked Questions in Golang(updating...)

    leetcode go语言版本,主要为了熟悉下语言 1. Two Sum 双指针版本, O(NlogN) func twoSum(nums []int, target int) []int { val ...

  7. AtCoder Regular Contest 085 C HSI【概率论】

    AtCoder Regular Contest 085 C HSI 没学概率论还不怎么看得懂,虽然感觉不难,其实明明可以猜出来的..... 参考博客:https://www.cnblogs.com/g ...

  8. CC2540 / CC2541 竟然支持 Bluetooth BLE 5.0?

    CC2540 / CC2541 竟然支持 Bluetooth BLE 5.0? 无意中发现 CC2541 的 BLE 协议栈更新了. BLE-STACK is Bluetooth 5.0 qualif ...

  9. LeetCode107 Binary Tree Level Order Traversal II

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  10. 注意特殊情况!最长上升子序列!!poj2533

    poj 2533 简单的动归.用O(n^2)的算法也能过.但是有个细节!刚开始ans初始化为0时是错的!!!要初始化为1.因为只有1个数的时候,下面的循环是不会执行的.....或者特判.. #incl ...