方案一 ： 可满足大部分浏览器正常使用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>copy example</title>

</head>

<body>

<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') ? '成功' : '失败'

      alert('复制内容 ' + msg);

    } catch (err) {

      alert('不能使用这种方法复制内容');

    }

    document.body.removeChild(textArea)

}

</script>

</body>

</html>

方案二： 兼容苹果 iphone js 复制功能 clipboard.js

下载地址： https://github.com/zenorocha/clipboard.js

<script src="你的路径clipboard.min.js"></script>

<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> 代码改变世界 </textarea>

<!-- Trigger -->

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">

Cut to clipboard

</button>

<script>

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {

console.info('Action:', e.action);

console.info('Text:', e.text);

console.info('Trigger:', e.trigger);

alert("复制成功");

e.clearSelection();

});

clipboard.on('error', function(e) {

console.error('Action:', e.action);

console.error('Trigger:', e.trigger);

});

</script>

【H5】使用h5实现复制粘贴功能的更多相关文章

  1. Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)

    在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...

  2. 在CMD命令行和PowerShell中实现复制粘贴功能

    在CMD命令行和PowerShell中实现复制粘贴功能         常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...

  3. 仿复制粘贴功能，长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  4. iOS开发之--复制粘贴功能

    复制粘贴功能,代码如下: 1.复制功能 UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = ...

  5. Java io流完成复制粘贴功能

    JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{        // 创建输入流要读 ...

  6. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  7. Vbox中unbuntu15.10与win10共享文件 及开启复制粘贴功能

    学习linux,一直使用的是VMware虚拟机,虽然功能很强大,但总感觉页面切换很麻烦.所以转入Vbox的使用,下面介绍下unbuntu15.10与win10共享文件. 一 共享文件夹 步骤1:启动u ...

  8. Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能

    当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...

  9. .NET 实现复制粘贴功能

    老是把自己当作珍珠,就时时有怕被埋没的痛苦.把自己当作泥土吧,让众人把你踩成一条道路. -----<泥土>鲁藜 .NET如何实现复制粘贴功能,具体代码如下: aspx文件: <div ...

  10. ubuntu18.04下取消中键复制粘贴功能

    Q: armlinux开发,主机采用ubuntu18.04操作系统,使用过程中关于鼠标中键有如下操作现象, 操作: 1.选中文本, 2.将鼠标光标定位到要插入的位置 3.按下鼠标中键 现象:将自动复制 ...

随机推荐

  1. MyBatis整合Spring MVC

    前面几篇文章已经讲到了mybatis与spring 的集成.目前主流的Web MVC框架,除了Struts这个主力外,还有Spring MVC,主要是由于 Spring MVC 配置比较简单,使用起来 ...

  2. python写的读取json配置文件

    配置文件默认为conf.json 使用函数set完成追回配置项. 使用load或取配置项. 代码如下: #!/usr/bin/env python3 # -*- coding: utf-8 -*- ' ...

  3. Git -- 新增分支添加新功能

    软件开发中,总有无穷无尽的新的功能要不断添加进来. 添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合 ...

  4. poj1276

    题目链接:http://poj.org/problem? id=1276 Cash Machine Time Limit: 1000MS   Memory Limit: 10000K Total Su ...

  5. 【转】C# 异常处理 throw和throw ex的区别 try catch finally的执行顺序（return）

    [转]throw和throw ex的区别 之前,在使用异常捕获语句try...catch...throw语句时,一直没太留意几种用法的区别,前几天调试程序时无意中了解到几种使用方法是有区别的,网上一查 ...

  6. http_build_query用法

    http_build_query (PHP 5) http_build_query -- 生成 url-encoded 之后的请求字符串描述string http_build_query ( arra ...

  7. uva 548 Tree（通过后序，先序重建树+dfs）

    难点就是重建树,指针參数的传递今天又看了看.应该是曾经没全然弄懂.昨天真没效率,还是不太专心啊.以后一定得慢慢看.不能急躁,保持寻常心,. 分析: 通过兴许序列和中序序列重建树,用到了结构体指针.以及 ...

  8. [转]java线程安全、jstack\线程dump、内存查看分析总结

    http://jameswxx.iteye.com/blog/808546 java线程安全总结二 http://jameswxx.iteye.com/blog/1041173 jstack和线程du ...

  9. redis 的hash数据类型

    hash的常用命令 1.hset hset key field value 将哈希表key中的域field的值设为value 如果key不存在,一个新的哈希表被创建并进行HSET操作 如果field是 ...

  10. Bootstrap 轮播（Carousel）详解

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...