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,一经查实,立即删除!

相关文章

MVC5 Controller构造方法获取User为空解决方法

用如下方法获取UserId报空引用异常 public class BaseController : Controller {protected SiteContext db new SiteContext();protected Guid userId;public BaseController(){userId Guid.Parse(User.Identity.GetUserId());} } 由于Controller未初始化完成,Use…

计算机应用领域的CIMS,计算机的应用领域

计算机的应用领域近年来,计算机技术得到了飞跃发展,超级并行计算机技术、高速网络技术、多媒体技术、人工智能技术等相互渗透,改变了人们使用计算机的方式,从而使计算机几乎渗透到人类生产和生活的各个领域,对工业和农…

VS2015企业版专业版密钥

亲测可用,有需要的可以mark一下!专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

Thinkphp编辑器扩展类kindeditor用法

一, 使用前的准备。 使用前请确认你已经建立好了一个Thinkphp站点项目。1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们拷贝到你的站点项目的ThinkPHP\Lib\ORG\Net 目录下。2,editor目录是kindeditor的核心包。将…

实时操作系统与通用计算机操作系统的区别,实时操作系统(RTOS)和通用操作系统(OS)之间的区别...

RTOS vs OS大多数人都熟悉电脑上使用的操作系统。用于个人电脑的最常见的操作系统包括:微软的Windows,苹果的OS X以及各种版本的Linux。但是多数人都不知道实时操作系统(缩写RTOS),一种用于实时响应的更专业化的操作系统。RTOS和OS两者之间最…

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…

加拿大计算机语言学,加拿大语言学专业排名

语言学专业简言之就是学习语言,包括语言的结构、形成、历史、以及人们如何使用语言等等。下面出国留学网小编和大家聊一聊2018加拿大大学语言学专业排名,希望对同学们有所帮助,欢迎阅读。1麦吉尔大学 McGill University麦吉尔大学是全球大学校…

UIView之常用方法

UIView之常用方法 将一个视图添加为子视图,并使之在最上面显示 -(void)addSubView:(UIView *)view;将指定子视图移动到顶部 -(void)bringSubViewToFront:(UIView *)view;将指定之视图放到最下面 -(void)sendSubViewToBack:(UIView *)view;将指定视图添加到subviews数…

Web前端开发框架对比

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

html5 筛子,html5摇骰子游戏

骰子游戏body#can;can;ctx;[];;;]]];window.οnlοad function(){can);ctx);ctx.clearRect(0,0,can.width,can.height);for(var i0;ictx.fillStyle orange;ctx.fillRect(diceCoordinates[i][0],diceCoordinates[i][1],40,40);draw(diceCoordinates[i],i,pointCoordinates[i]);…

关于xcode7编译旧项目崩溃-[UIApplication _runWithMainScene:transitionContext:completion:]

崩溃原因 crash:Assertion failure in -[UIApplication _runWithMainScene:transitionContext:completion:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-( *** Terminating app due to uncaught exception NSInternalInconsiste…

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…

标准MD5加密算法

标准MD5加密算法: public class Md5 {public static String getMd5(String s) {char hexDigits[] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,a, b, c, d, e, f };try {byte[] strTemp s.getBytes();MessageDigest mdTemp MessageDigest.getInstance("md5");mdTemp.update(s…

程序员大牛们的经典语录

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

linux下创建的符号链接的权限

今天为shell脚本创建符号链接的时候突然发现的, 创建的符号链接文件的默认权限是 777, 而想要这个脚本可执行, 必须为真正的文件加上 x 权限才可以. 转载于:https://www.cnblogs.com/vanwoos/p/5075656.html

计算机osta试题,OSTA试题库.doc

OSTA试题库章节单选多选填空判断小计计算机基础知识64152020119Windows操作系统4810101583计算机网络应用4810151184Word文档处理51172120109Excel电子表格处理4515152095PowerPoint演示文稿制作5215112098多媒体技术4512102087合计35394102126675计算机基础知识(64152020120)一…

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)实现用计数字段对记录进行重复显示版权声明 版权声明:原…