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

<!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. Unity--------------------万向锁的概念

    万向锁 一直困惑我很久....原因出在这里,我以为欧拉角旋转是以模型坐标(齐次坐标系)为旋转轴.问题就来了,无论旋转那个轴,其它两个轴也会相应的变化,下面看图: 根据上面的说明两个旋转面(圆圈)怎么会 ...

  2. Apache ZooKeeper

    https://zookeeper.apache.org/ https://zh.wikipedia.org/wiki/Apache_ZooKeeper Apache ZooKeeper是Apache ...

  3. 让不支持MVC3的服务器/空间/虚拟主机 支持MVC3 (前提是必须支持 .net 4.0才可以)

    在有的时候,你用的VPS,服务器或者是虚拟空间可能是没有安装MVC3的,下面我们就自己来手动来让虚拟空间支持(前提是空间必须是.net 4.0的,因为MVC3是在4.0下运行) 我们先在web.con ...

  4. EXP-00056遇到Oracle错误1455问题解决办法

    简单描述一下问题:需要备份一下生产环境的数据库到测试环境,使用EXP命令备份数据库时出现错误 EXP-00056: 遇到 ORACLE 错误 1455 ORA-01455: 转换列溢出整数数据类型 E ...

  5. Hadoop分布式集群部署(单namenode节点)

    Hadoop分布式集群部署 系统系统环境: OS: CentOS 6.8 内存:2G CPU:1核 Software:jdk-8u151-linux-x64.rpm hadoop-2.7.4.tar. ...

  6. iOS：App 内部更改使用语言/ 重定义系统的宏

    代码部分 #undef NSLocalizedString #define NSLocalizedString(key, comment) \ NSLocalizedStringFromTable(k ...

  7. OSG 坑爹的Android example

    本人3D编程方面超级菜鸟,因为项目需要,接触了一些Open Scene Graph(OSG)引擎的相关编程工作.首先我得承认,OSG这个引擎超级牛,无论是渲染效果和效率,都没的说,很棒.但是,OSG提 ...

  8. 命令行编译C++程序

        使用命令行来编译C++程序,我们可以有两种方法:     方法一:     1. 依次打开开始程序->Visual Studio 2010 –>Visual Studio tool ...

  9. php过滤字段htmlentities，htmlspecialchars，strip_tags

    1.strip_tags:过滤html标签比如<a> <html> <script> 如: $str = '<a href="test.html&q ...

  10. How to make an HTTP request in Swift

    from: http://stackoverflow.com/questions/24016142/how-to-make-an-http-request-in-swift You can use N ...