H5 复制粘贴 - execCommand

字数748 阅读399 评论0 喜欢0

需求:自动复制一段内容到剪切板, 让用户可以在其他客户端粘贴(发小广告做推广经常要用吧)

window.clipboardData (IE 才有)

是个很好用的对象, 但是 只在 IE 才有,
IE 被吐糟了一万年, 才发现他有个不错的地方.
IE 即将退出历史, 找点其他的吧.

ZeroClipboard (借助Flash)

是一个不错选择, 但是他还是借助的 flash 实现的
本人讨厌 Flash, 弃之.

window.prompt

这个还是算了吧, 一点都不友好. 手机用户还需要长按 再点击复制

document.execCommand (今天的猪脚)

简介
当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法，通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作
(如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable，通过执行execCommand
方法可以对当前活动元素进行很多操作。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

今天咱们只会用到 copy .

简介里说 当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法.

但是咱们根本不想出现一个 textarea 好嘛, 否则和window.prompt有啥区别呢?

最简单最有效的方式就是把 textarea 给隐藏起来嘛

const copy = text => {

  const textarea = document.createElement("textarea")

  textarea.style.position = 'fixed'

  textarea.style.top = 0

  textarea.style.left = 0

  textarea.style.border = 'none'

  textarea.style.outline = 'none'

  textarea.style.resize = 'none'

  textarea.style.background = 'transparent'

  textarea.style.color = 'transparent'

  textArea.value = text

  document.body.appendChild(textarea)

  textArea.select()

  try {

    const msg = document.execCommand('copy') ? 'successful' : 'unsuccessful'

    console.log(msg)

  } catch (err) {

    console.log('unable to copy', err)

  }

  document.body.removeChild(textarea)

}

demo

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>copy example</title>

</head>

<body>

<h5>献给我我可爱的胖子</h5>

<p>

  <button class="copy">Copy</button>

</p>

<p>

  <textarea cols="50" rows="10" placeholder="这这里粘贴试一下吧!"></textarea>

</p>

<script>

  var copyBtn = document.querySelector('.copy')

  // 点击的时候调用 copyTextToClipboard() 方法就好了.

  copyBtn.onclick = function() {

    copyTextToClipboard('随便复制点内容试试')

  }

  function copyTextToClipboard(text) {

    var textArea = document.createElement("textarea")

    textArea.style.position = 'fixed'

    textArea.style.top = 0

    textArea.style.left = 0

    textArea.style.width = '2em'

    textArea.style.height = '2em'

    textArea.style.padding = 0

    textArea.style.border = 'none'

    textArea.style.outline = 'none'

    textArea.style.boxShadow = 'none'

    textArea.style.background = 'transparent'

    textArea.value = text

    document.body.appendChild(textArea)

    textArea.select()

    try {

      var msg = document.execCommand('copy') ? '成功' : '失败'

      console.log('复制内容 ' + msg)

    } catch (err) {

      console.log('不能使用这种方法复制内容')

    }

    document.body.removeChild(textArea)

}

</script>

</body>

</html>

转自：http://www.jianshu.com/p/37322bb86a48

H5复制粘贴的更多相关文章

  1. H5复制粘贴双端适配的解决方案（终极版）

    前言 最终适配所有机型的方案基于clipboardjs官网https://clipboardjs.com/ 这个库由几个不同的CDN提供商托管.选择你最喜欢的:) jsDelivr <scrip ...

  2. h5复制粘贴板，打开APP功能

    <div class="container"> <img src="../themes/mall/img/i_red_ad4.jpg"> ...

  3. Android中的复制粘贴

    Android中的复制粘贴 The Clipboard Framework 当使用clipboard framework时,把数据放在一个剪切对象(clip object)里,然后这个对象会放在系统的 ...

  4. 远程桌面时plsql的复制粘贴功能失效

    解决办法:重新启动远程桌面上的rdpclip进程就可以复制粘贴了,但是每次重开远程桌面都会出现同样的问题.可以rdpclip这个设置成开机启动.

  5. 不注册COM在Richedit中使OLE支持复制粘贴

    正常情况下在Richedit中使用OLE,如果需要OLE支持复制粘贴,那么这个OLE对象必须是已经注册的COM对象. 注册COM很简单,关键问题在于注册时需要管理员权限,这样一来,如果希望APP做成绿 ...

  6. ios textfield / textview长按复制粘贴中文显示

    当我们在写应用时要复制粘贴文本框内容时,默认显示的文字为英文字体,可按如下步骤设置,显示中文:

  7. 复制粘贴出来的悲剧----spring实现文件下载和HttpStatus.CREATED

    今天真是被自己的懒惰和复制粘贴给坑惨了... 网上有这么一个spring下载文件的最佳实践: @RequestMapping("download") public Response ...

  8. ZeroClipboard跨浏览器复制粘贴

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...

  9. shutil复制粘贴和压缩

    shutil复制粘贴和压缩 shutil 高级的文件.文件夹.压缩包处理模块 @1).将文件内容拷贝到另一个文件中 import shutil shutil.copyfileobj(open(&quo ...

随机推荐

  1. servlet的跳转

    首先要有RequestDispatcher对象(由request.getRequestDispatcher(根目录)注意不用谢后缀名java RequestDispatcher dispatcher= ...

  2. Apache的htaccess文件出现500错误的原因

    Apache 我平时很少用到,今天测试环境下碰到个问题,老是500错误莫名其妙 RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FI ...

  3. [SQL基础教程] 4-3 数据的更新(UPDATE)

    [SQL基础教程] C4 数据更新 4-3 数据的更新(UPDATE) UPDATE UPDATE <表名> SET <列名> = <表达式>; UPDATE &l ...

  4. Qt编译

    版本及安装环境 项目 版本 位 Windows 7 x64 Visual Studio 2010 x64 qt 4.8.6 x64 下载源码 进入下载列表,下载qt-everywhere-openso ...

  5. Unity 发布到IOS,Android的各种坑

    Unity 发布到IOS的注意事项1.开发环境MAC环境:Xcode环境 7.2.1Unity环境:Unity5.32.基本说明首先,我说一下,这是我在对Unity发布到IOS的实际使用中,总结出来的 ...

  6. CUDA开发时用到的各种Linux命令

    cat 读取文件中的全部内容. 例:cat cuda_add.cu

  7. PHP数组关于数字键名的问题

    以下是对PHP数组数字键名的几点总结: 键名长度只能在 int 长度范围内,超过int 范围后将会出现覆盖等混乱情况 在键名长度为 int 范围内存取值时,PHP会强制将数字键名转换为 int 数值型 ...

  8. Laravel生成编译文件权限问题

    sudo -unobody ./artisan optimize # 避免`fpm`账户无权限修改缓存文件的问题.这里的`nobody`改成实际的`fpm`用户名.

  9. 关于LeetCode的Largest Rectangle in Histogram的低级解法

    在某篇博客见到的Largest Rectangle in Histogram的题目,感觉蛮好玩的,于是想呀想呀,怎么求解呢? 还是先把题目贴上来吧 题目写的很直观,就是找直方图的最大矩形面积,不知道是 ...

  10. NOIP2015-普及组复赛-第一题-金币

    题目描述 Description 国王将金币作为工资,发放给忠诚的骑士.第一天,骑士收到一枚金币:之后两天(第二天和第三天),每天收到两枚金币:之后三天(第四.五.六天),每天收到三枚金币:之后四天( ...