以前做的项目,主要是针对ios的,安卓上面也没有测试。

原理其实是系统自带的功能,那时候借鉴的其他网站,没有试验通过document.execCommand("Copy"),别的js方式。

现在手上也没有设备了,这边只是提供html实现的方式。

1.跟网上的博客介绍的一样的,要满足

a.要复制的内容独占一行,不要和其他内容在一行(通过相对定位的也不可以)

b.设置-webkit-user-select:initial;

2.ios9下面就是有问题,找了相同项目发现他们都正常的,研究了半天,原来他们是通过在外面遮盖一个未知的img,alt设置需要复制的内容实现的

下面是主要的html,css,仅供参考

<style>
//css
.task-key-img {
-webkit-user-select: none;
z-index: 2;
opacity: 0;
}
.task-key-img, .task-key-shadow {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
left: 0;
}
</style>
//html
<div class="url w100 tac pt6 pb6" style="-webkit-user-select:initial;position:relative;">
<img class="task-key-img" alt="复制的内容" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAFklEQVQImWP8//8/AwMDEwMDAwMDAwAkBgMBmjCi+wAAAABJRU5ErkJggg==">
<div class="task-key-shadow"></div>
<span style="-webkit-user-select:initial;font-size: 14px;">复制的内容</span>
</div>

3.有些推广的(如钱咖),点按钮就进行了复制,(是通过app实现的,通过http或这websocket的方式,调用后台运行的钥匙功能)

ios html5 长按复制文本的更多相关文章

  1. mui 点击长按复制文本

    项目需要长按复制文本内容,由于也没仔细研究过 mui 所以就直接百度.看到了 花落乱了流年 这篇博客 我就把这个博客的代码融合到自己的项目里,实现了复制的需求 直接上代码 单独写到了一个 js 文件. ...

  2. ios label 简单的长按复制文本信息

    在iOS开发过程中,有时候会用到UILabel展示的内容,那么就设计到点击UILabel复制它上面展示的内容的功能,也就是Label长按复制功能.网上有很多种给Label添加长按复制功能的方法,这里我 ...

  3. ios - UILabel_长按复制

    1.添加长按的手势 UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWith ...

  4. Wx-小程序-长按复制文本

    view: <text bindlongtap='copy' data-name='{{name}}'>{{item.name}}</text> js: copy(e) { v ...

  5. 【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)

    一 实际效果二 实现原理三 源码下载 在egret中实现长按复制文本效果,一般用于复制优惠码什么的. 一 实际效果         二 实现原理 在egret的游戏元素都是绘制在canvas上的,我们 ...

  6. JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现

    因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...

  7. h5页面在ios机上禁止长按复制

    (注意,增加之后需要对input的另外设置,不然输入框无法输入)场景:H5出现一个按钮需要长按几秒展示动画的,如:skcs.net-tactic.com/wap/peace/index,这时就需要用到 ...

  8. HTML5手机页面里面如何把长按复制避免

    在写HTML5手机页面的时候,有时候会写到一些标签是需要用户长按然后放开的 但是微信里面长按就会出现复制,大大影响了用户体验,那么如何可以避免呢? 我也是最近写到这样的页面,总结了一部分,大家可以作为 ...

  9. HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题

    1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...

随机推荐

  1. 17款提高编程效率的css工具

    参看下面链接:<17款提高编程效率的css工具>

  2. Java中关于final关键字

    final关键字,大学时一直没有理解,伴随到工作,郁闷......也可能大学真的没认真去学习 首先,final给人一看英语单词 不就是最终的嘛,最终的什么的呢 ? 小张现在就带大家 学习下..... ...

  3. event和window.event

    type:事件的类型,如onlick中的click:srcElement/target:事件源,就是发生事件的元素:button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下 ...

  4. PROCEDURE_监测系统_告警信息存储过程—产生告警信息插入告警表

    create or replace procedure proc_alarmlog(in_id   in number, --采集器编码                                 ...

  5. PHP PSR-3 日志接口规范 (中文版)

    日志接口规范 本文制定了日志类库的通用接口规范. 本规范的主要目的,是为了让日志类库以简单通用的方式,通过接收一个 Psr\Log\LoggerInterface 对象,来记录日志信息. 框架以及CM ...

  6. windows下配置Nginx+Mysql+Php7

    环境:Windows10 mysql-5.6.24-win32解压缩版    nginx-1.8.0    php7 1.Mysql安装 下载压缩文件之后解压缩至相应目录(我的目录是G:\wnmp\m ...

  7. php 查看文档

    http://www.runoob.com/php/php-datatypes.html php 学习网站 : http://www.phpfans.net/

  8. php 去掉 头尾 空格 2种方法

    看似很简单的问题,其实还是有点坑的,首先这里 空格转义,不是字符串,直接用trim()是去不掉. 1,用preg_replace替换 $test = " dfadad 论责民与三英的关系77 ...

  9. C++----练习--引用头文件

    1.创建头文件和源文件 touch /tmp/tools.h touch /tmp/main.cpp 2.各文件的内容如下: tools.h #include<iostream> void ...

  10. Socket基础(一)

    OSI七层模型: 物理层:比特,数据链路层:帧,网络层:包,传输层及以上:报文.因为不用,不做详解. TCP/IP模型:这个常用,详解. 链路层:负责在两个相邻节点上线路上的无差错传输数据,以帧为单位 ...