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

<!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. Python——hmac

    该模块在Python中实现 RFC 2104 中规范的 HMAC 算法. 目录 一.HMAC 对象 1. HMAC.update() 2. HMAC.digest() 3. HMAC.hexdiges ...

  2. miRbase 数据库简介

    miRbase 是miRNA 的数据库,目前最新版本为 release 21, 共有28645 条 miRNA,  第22 版已经完成,即将发布,22版新增了10000 个miRNA, 大多来源于新的 ...

  3. PHI 数据库简介

    PHI是一个致病菌的数据库,截止到2017年8月1号为止,最新的版本是4.3,数据库中收录了实验验证过的致病菌的信息,其中有176个来自动物的致病菌,227个来自植物的致病菌,3个来自真菌的致病菌; ...

  4. R语言igraph 包-构建网络图

    igaph 是一个项目,目标是建立一条简单,易用的网络分析工具,有 R, python, C/C++ 等语言的具体实现: 项目主页: http://igraph.org/ 在R语言中,对应的就是 ig ...

  5. C# Bitmap/png转成jpg格式，压缩图片

    public static ImageCodecInfo GetEncoder(ImageFormat format) { ImageCodecInfo[] codecs = ImageCodecIn ...

  6. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  7. unity3d 读取usb摄像头

    using UnityEngine; using System.Collections; public class C : MonoBehaviour { private WebCamTexture ...

  8. 在PC上运行安卓（Android）应用程序的4个方法

    我有一部荣耀3C,一般放在宿舍(我随身携带的是一部诺基亚E63,小巧.稳定.待机时间长),在宿舍我就会用它在微信上看公众号里的文章,最近要考驾照也在上面用驾考宝典.最近想在实验室用这两个软件,但又懒得 ...

  9. C# DataTable转实体 通用方法

    public static T GetEntity<T>(DataTable table) where T : new() { T entity = new T(); foreach (D ...

  10. 代码记录——phase16,block36

    36*36 -2,-2扩展 代码有问题,有时能运行有时报错. HRESULT RotateZoom(PBYTE pbSrc,int iWidth,int iHeight,double dbRotate ...