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. node中__dirname、__filename表示的路径

    __dirname 表示当前文件所在的目录的绝对路径__filename 表示当前文件的绝对路径module.filename ==== __filename 等价process.cwd() 返回运行 ...

  2. WPF style 换肤

    原文地址:http://www.cnblogs.com/DebugLZQ/p/3181040.html 原作者:DebugLZQ UI的风格一致性是应用程序应当关注的重要特性. 1.Creating ...

  3. 【python小随笔】celery周期任务(简单原理)

    1:目录结构 |--celery_task |--celery.py # 执行任务的main函数 |--task_one # 第一个任务 |--task_two # 第2个任务 . . . . |-- ...

  4. 软工作业———Alpha版本第二周小结

    姓名 学号 周前计划安排 每周实际工作记录 自我打分 zxl 061425 1.进行任务分配2.实现扫码和生成二维码功能 1.对主要任务进行了划分,但还为进行给模块间的联系2.完成了扫码签到功能 90 ...

  5. elipse egit的使用

  6. json格式示例

    案例一: {key:value,key:value} class Person{ String firstname = "张"; String lastname = "三 ...

  7. 【水滴石穿】ReactNative-Redux-Thunk

    老实说,运行出来的项目让人失望,毕竟我想看各种有趣的demo啊- 先放上源码地址:https://github.com/ludejun/ReactNative-Redux-Thunk 我们来一起看看代 ...

  8. startActivity 流程图

  9. Anaconda入门使用指南

    打算学习 Python 来做数据分析的你,是不是在开始时就遇到各种麻烦呢? 到底该装 Python2 呢还是 Python3 ? 为什么安装 Python 时总是出错? 怎么安装工具包呢? 为什么提示 ...

  10. Directx11教程(3) 一个最基本D3D应用程序(1)

    原文:Directx11教程(3) 一个最基本D3D应用程序(1)       在前一篇教程程序代码的基础上,这次我们将增加2个类: InputClass,键盘处理的代码将放在这个类里面,Graphi ...