html复制文字兼容手机,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...

新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了。写出了总结下

使用的方法:clipboard

插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master

引入插件:目录\clipboard.js-master\dist\clipboard.min.js

目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路;

下边来记录下使用的方式:

一:引入插件:

二:给标签添加属性:data-clipboard-text

Copy

三:定义script :实现复制功能---(写的内部的script,外部的总是报错,找不到类,新手不大懂,以后再补充)

var clipboard = new Clipboard('btn');

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

e.clearSelection();

//复制成功

});

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

//复制失败

});

补充:new Clipboard()----参数为id class都可以,跟css定义一样 id 或者.class

四:自定义复制的内容;

new Clipboard('.btn', {

target: function(trigger) {

return trigger.nextElementSibling;

}

});

通过return返回想复制的内容,

五:列表页复制每条列表内容

可以给每个item自定义属性data-clipboard-text即可

div.setAttribute("data-clipboard-text","asdf");

补充:电脑浏览器几乎都可以支持,手机上安卓可以,苹果有点问题,需要把标签设置成button

以上所述是小编给大家介绍的JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持! ad51e517755f8fd6a7ec83ced4ecfaf3.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272576.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Memcached的基础梳理

1 、Memcached 概念官方解释如下:What is Memcached?Free & open source, high-performance, distributed memory object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load.Me…

html5 canvas 笔记五(合成与裁剪)

组合 Compositing globalCompositeOperation syntax: globalCompositeOperation type 注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”。 source-over  这是默认…

一个能够编写、运行SQL查询并可视化结果的Web应用:SqlPad

SqlPad 是一个能够用于编写、运行SQL查询并可视化结果的Web应用。支持 PostgreSQL、MySQL 和 SQL Server。SqlPad 目前仅适合单个团队在内网中使用,它直接通过网络连接到数据库服务器,任何人可以在上面执行任意 SQL 语句。安装首先安装 Node.js.安装好No…

Web前端开发框架对比

近几年随着 jQuery、Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。这些框架各有特…

linq.js的用法

linq.js 详细介绍linq.js 是一个 JavaScript 实现的 LINQ。主要特性:实现所有 .NET 4.0 的方法complete lazy evaluationfull IntelliSense support for VisualStudiotwo versions - linq.js and jquery.linq.js (jQuery plugin)support Windows Script Hostbinding…

程序员大牛们的经典语录

1、很多问题不见得会出在你身上,但你亦需要想法解决问题,否则就会变成你的问题;2、懂得但策略的说不(不会这个准备累死吧,程序员);3、我考进事业单位,呵呵,没有传说中的那…

SQLSERVER得到数据库中所有表字段及字段中文描述

如何得到数据库中所有表字段及字段中文描述以下资料,通过csdn的一位师兄从SQL版主那得到:sql中SELECT (case when a.colorder1 then d.name else end) N表名, a.colorder N字段序号, a.name N字段名, (case when COLUMNPROPERTY( a.id,a.name,IsIdentity)1 then √else end)…

SQL Server 2008 R2——使用数字辅助表(master..spt_values)实现用计数字段对记录进行重复显示...

SQL Server 2008 R2——使用数字辅助表(master..spt_values)实现用计数字段对记录进行重复显示 原文:SQL Server 2008 R2——使用数字辅助表(master..spt_values)实现用计数字段对记录进行重复显示版权声明 版权声明:原…

编程界十大顶级IDE

IDE是集成开发环境(Integrated Development Environment)缩写。IDE是一种个编程软件,是集成了程序员语言开发中会需要的一些基本工具、基本环境和其他辅助功能的应用软件。IDE一般包含三个主要组件:源代码编辑器(Edito…

布法罗博士计算机专业回国人员,四名UW学生参加爱达荷州国家实验室的实习计划...

中游石油和天然气运营正日益面临代价高昂,受到严格审查的事件,这些事件源于老化(泄漏和爆炸),自然事件(洪水,地震活动和极端天气)以及网络入侵和攻击。解决这些问题的一种方法涉及使用集成的智能监控系统或安全嵌入式智能(SEI)。怀…

计算机考试题操作题答案,全国计算机等级考试模拟题一(带操作题及答案)

一、选择题1. 数据的存储结构是指( )。A.数据所占的存储空间 B.数据的逻辑结构在计算机中的存放形式 C.数据在计算机中的顺序存储方式 D.存储在计算机外存中的数据 B。【解析】数据的存储结构,又称为数据的物理结构&am…

Library not loaded: @rpath/libswiftCore.dylib

解决方法: 转载于:https://www.cnblogs.com/penger/p/5080581.html

计算机组成原理课程设计a,计算机组成原理课程设计报告.doc

计算机组成原理课程设计报告.doc (13页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.90 积分计算机组成原理课程设计报告实验项目:1、设计一个具有带进位加法和立即数寻址…

绝地求生登录计算机需要授权,绝地求生国服第三方授权登录异常解决方法 绝地求生国服授权登录错误怎么办...

近日,Steam第三方授权登录发生异常,导致所有需要Steam账号绑定登录的网站都出现登录错误,下面就为大家带来绝地求生国服第三方授权登录异常解决方法。绝地求生国服第三方授权登录异常解决方法老兵登机活动绑定公告亲爱的老兵们:今…

SQL Server索引怎么用

什么是索引拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K 。为了加快查找的速度,汉语字(词)典一般都有…

EF 实现自定义数据库字符串

1、EF模板生成继承DbContext的类文件重新建一个部分类文件避免每次生成实体都会覆盖掉。2、重新构造调用数据库连接字符串的函数VS模板生成示例:public Test_DBEntities(): base("nameTest_DBEntities"){} 重写函数public Test_DBEntities(string conn…

原神服务器维护后抽奖池会更新吗,原神:武器池改动,玩家的诉求再次得到反馈!PS端将与官服互通!...

大伙直播都看了吗?反正我看完了。现在满脑子都是大伟哥的嗯典。这好吗?这不好。但是没有关系,内容还是有的。首先,剧情上的雷神确立了,就是这位大姐。(好像有什么锋利的东西悬在了我的头顶,不过这上面&…

解决Genymotion下载设备失败的方法(Connection Timeout)

一直下载不下来,报错。 解决办法: 打开 C:\Users\用户名\AppData\Local\Genymobile目录 打开genymotion.log文件,在里面最下面几行,找到如下日志 [Debug] Downloading file "http://files2.genymotion.com/dists/4.4.4/ova/…

寻仙服务器要维护多久,寻仙手游几天开一个区

摘要寻仙手游最新开服时间表IOS和安卓,寻仙手游什么时候新增开服,开服时间公告。我们将于8月17日(周四)凌晨5:00-9:00对全服进行停机更新,请您提前保存游戏进程,安全下线。听到很多小伙伴都在讨论寻仙手游几天开一个区&#xff0c…

Linux文件编程(2)

文件打开创建补充 &#xff08;1&#xff09;O_EXCL O_EXCL和O_CREAT配合使用 若文件不存在则创建文件 若文件存在则返回-1 代码演示 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include<stdio.h> int main() {int fd;fdope…