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. The Linux Mint 18.1:Eclipse Run The C++ And Python ConfigorationWhen You achieve above step,you can run the c++ and python! (Next OTL ,PYOTL is Project That Write By Ruimin Shen(ability man) )

    # Copyright (c) 2016, 付刘伟 (Liuwei Fu)# All rights reserved.# 转载请注明出处 1.Install The Eclipse,g++ Use T ...

  2. jemeter逻辑控制器

    1.ForEach控制器 ForEach控制器在用户自定义变量中读取一系列相关的变量.该控制器下的采样器或控制器都会被执行一次或多次,每次读取不同的变量值.所以ForEach总是和User Defin ...

  3. 百度的hao123.com篡改浏览器首页，解决办法

    快捷方式右键找到chrome.exe, 把chorme.exe修改成别的名字例如 chromeFuckHao123.exe 就OK了. hao123是用病毒的形式查找chrome.exe然后进程注入的 ...

  4. jmeter（八）-JDBC请求（sqlserver）

    做JDBC请求,首先要了解这个JDBC对象是什么,然后寻找响应的数据库连接URL和数据库驱动. 数据库URL:jdbc:sqlserver://200.99.197.190:1433;database ...

  5. FZU 2088 最长队名

    Problem 2088 最长队名  Problem Description Jack所在的班级决定组团报名参加FZU校赛.为了体现班级的团结和睦,班长决定用班级所有人的名字连起来组成一个史上最长最醒 ...

  6. java 异常的捕获及处理

    在没有异常处理的程序中如果要回避异常,需要使用大量的判断语句,配合所想到的错误状况来捕捉程序中可能发生的错误.但是这样势必会导致程序运行效率降低.java异常处理机制具有易于使用,可自定义异常类,处理 ...

  7. Tomcat 6 跨域的支持

    1.添加2个jar包 这个我是自己保存在云端的 cors-filter-1.7.jar java-property-utils-1.9.jar tomcat7以后自动支持 2.tomcat 下面的we ...

  8. strutsprepareAndExecuteFiter

    FilterDispatcher是早期struts2的过滤器,后期的都用StrutsPrepareAndExecuteFilter了,如 2.1.6.2.1.8.StrutsPrepareAndExe ...

  9. sql数据导出导入格式化

    SHELL脚本导入导出数据时,按逗号分隔,引号包含字段,null值'' gccli -uroot -h$ip -e"rmt:${sqlStr} into outfile '${name}${ ...

  10. openstack私有云布署实践【9.3 主从controller单向同步glance-image目录】

    采用Rysnc单向同步,而不用双方实时同步,原因是在历史的运行过程中,我们发现,有些镜像包太大,当在主用的glance将镜像保存时,并不是一时半会就把镜像保存好,当主用在保存时,备用节点又在实时同步那 ...