【H5】使用h5实现复制粘贴功能
方案一 : 可满足大部分浏览器正常使用
<!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实现复制粘贴功能的更多相关文章
- Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)
在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...
- 在CMD命令行和PowerShell中实现复制粘贴功能
在CMD命令行和PowerShell中实现复制粘贴功能 常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...
- 仿复制粘贴功能,长按弹出tips的实现
方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...
- iOS开发之--复制粘贴功能
复制粘贴功能,代码如下: 1.复制功能 UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = ...
- Java io流完成复制粘贴功能
JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{ // 创建输入流要读 ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...
- Vbox中unbuntu15.10与win10共享文件 及开启复制粘贴功能
学习linux,一直使用的是VMware虚拟机,虽然功能很强大,但总感觉页面切换很麻烦.所以转入Vbox的使用,下面介绍下unbuntu15.10与win10共享文件. 一 共享文件夹 步骤1:启动u ...
- Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能
当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...
- .NET 实现复制粘贴功能
老是把自己当作珍珠,就时时有怕被埋没的痛苦.把自己当作泥土吧,让众人把你踩成一条道路. -----<泥土>鲁藜 .NET如何实现复制粘贴功能,具体代码如下: aspx文件: <div ...
- ubuntu18.04下取消中键复制粘贴功能
Q: armlinux开发,主机采用ubuntu18.04操作系统,使用过程中关于鼠标中键有如下操作现象, 操作: 1.选中文本, 2.将鼠标光标定位到要插入的位置 3.按下鼠标中键 现象:将自动复制 ...
随机推荐
- adv7180驱动
http://download.csdn.net/download/u013308744/9945184 http://www.ebaina.com/bbs/thread-10121-1-1.html ...
- nodejs基础 -- web模块
什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL,与客 ...
- Linux系统源码安装软件过程中configure选项-prefix的作用
在linux和unix环境中,源码安装是最常用的软件安装方式,一些软件出了提供源码外,也提供各种发行版的二进制安装包(如基于redhat包管理工具的rpm包),但强烈建议使用源码安装方式. 在linu ...
- C# Bitmap/png转成jpg格式,压缩图片
public static ImageCodecInfo GetEncoder(ImageFormat format) { ImageCodecInfo[] codecs = ImageCodecIn ...
- u3d animation运用明细
u3d的动作legacy模式,经测试得出 using UnityEngine; using System.Collections; public class AnimateCon : MonoBeha ...
- Ubuntu下从外网上北邮人BT
首先你需要有北邮的VPN账号和密码,只要是北邮的学生都有 账号和密码不懂的请查看 VPN账号密码说明 接下来登录 https://sslvpn.bupt.edu.cn,输入账号和密码 已经登录好了 但 ...
- xshell使用xftp传输文件 使用pure-ftpd搭建ftp服务
xshell使用xftp传输文件 下载xftp5 https://www.baidu.com/link?url=8rtxgX3JRIbUFO1Samzv5aXhfwRG7Cf8i4vi573QexoH ...
- ScrollView子控件高度设置无效
ScrollView子控件高度设置无效 简述 项目中引入了第三方的下拉刷新包PullToRefreshScrollView. 由于我之前布局未考虑下拉刷新功能.后来暂时发现添加上去,发现.子控件的高度 ...
- Mapper method 'com.autoyol.mapper.trans.AccountLogMapper.getTotalIncomByMemNoLastest attempted to return null from a method with a primitive return type (int).解决方法
1.打开日志输出,降低日志级别. <AppenderRef ref="console" level="trace"></AppenderRef ...
- linux 使用supervisor来管理进程
现在假设一个脚本是,hello.py,内容是 fo = open('xx.txt','w') while 1: fo.write('hello world') print('hi') time.sle ...