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

<!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接口注解

    在上一章中,我们已经搭建了 myeclipse,mybatis,mysql 的开发环境,并且实现了 mybatis 的一个简单的查询.要注意的是,这种方式是用 SqlSession 实例来直接执行在U ...

  2. 使用Maven清理项目

    在基于Maven的项目中,很多缓存输出在“target”文件夹中.如果想建立项目部署,必须确保清理所有缓存的输出,从面能够随时获得最新的部署. 要清理项目缓存的输出,发出以下命令: mvn clean ...

  3. jQuery table td可编辑

    参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...

  4. JavaSE（二）之继承、封装、多态

    学习完类与对象终于认识到什么是类,什么是对象了.接下来要看的就是java的三大特征:继承.封装.多态. 一.封装(数据的隐藏) 在定义一个对象的特性的时候,有必要决定这些特性的可见性,即哪些特性对外部 ...

  5. XCODE 添加不同IOS版本的模拟器

    一.XCode->Preferences->Downloads, 可以下载模拟器.

  6. html5 移动适配写法

    在pc版网页(http://pc_url) 上,添加: <link rel="alternate" media="only screen and(max-width ...

  7. 让Zend Studio联系关系CakePHP模板文件.ctp

    让Zend Studio关联CakePHP模板文件.ctp Zend Studio是套强大的PHP编辑器,各种给力让PHP开发者爱不释手.对于CakePHP程序员来说,有件事情相当头疼,在初始安装好Z ...

  8. hibernate 之 sql查询

    如果用hibernate执行原生sql进行数据查询可以调用 SQLQuery query = getSession().createSQLQuery(sql); 然后再执行 query.list() ...

  9. linux系统调用函数---12

    Linux应用编程学习笔记                                 周学伟 一．系统调用文件编程   1.文件打开函数 /*************************** ...

  10. [OpenCV] Samples 15: Background Subtraction and Gaussian mixture models

    不错的草稿.但进一步处理是必然的,也是难点所在. Extended: 固定摄像头,采用Gaussian mixture models对背景建模. OpenCV 中实现了两个版本的高斯混合背景/前景分割 ...