ios html5 长按复制文本
以前做的项目,主要是针对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 长按复制文本的更多相关文章
- mui 点击长按复制文本
项目需要长按复制文本内容,由于也没仔细研究过 mui 所以就直接百度.看到了 花落乱了流年 这篇博客 我就把这个博客的代码融合到自己的项目里,实现了复制的需求 直接上代码 单独写到了一个 js 文件. ...
- ios label 简单的长按复制文本信息
在iOS开发过程中,有时候会用到UILabel展示的内容,那么就设计到点击UILabel复制它上面展示的内容的功能,也就是Label长按复制功能.网上有很多种给Label添加长按复制功能的方法,这里我 ...
- ios - UILabel_长按复制
1.添加长按的手势 UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWith ...
- Wx-小程序-长按复制文本
view: <text bindlongtap='copy' data-name='{{name}}'>{{item.name}}</text> js: copy(e) { v ...
- 【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)
一 实际效果二 实现原理三 源码下载 在egret中实现长按复制文本效果,一般用于复制优惠码什么的. 一 实际效果 二 实现原理 在egret的游戏元素都是绘制在canvas上的,我们 ...
- JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现
因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...
- h5页面在ios机上禁止长按复制
(注意,增加之后需要对input的另外设置,不然输入框无法输入)场景:H5出现一个按钮需要长按几秒展示动画的,如:skcs.net-tactic.com/wap/peace/index,这时就需要用到 ...
- HTML5手机页面里面如何把长按复制避免
在写HTML5手机页面的时候,有时候会写到一些标签是需要用户长按然后放开的 但是微信里面长按就会出现复制,大大影响了用户体验,那么如何可以避免呢? 我也是最近写到这样的页面,总结了一部分,大家可以作为 ...
- HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题
1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...
随机推荐
- css使用技巧
1) 网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行,把版式破坏,这样我们就要参考以下样式:word-wrap:break-word; overflow:hidden; 当然必须得有宽 ...
- 查看oracle中的中文所占字节数
select userenv('language') from dual 显示:SIMPLIFIED CHINESE_CHINA.ZHS16GBK 表示一个汉字占用两个字节. 显示:SIMPLIFIE ...
- KeyTool
http://ln-ydc.iteye.com/blog/1335213 http://lukejin.iteye.com/blog/605634
- MySQL库目录下db.opt文件的作用
细心的朋友可能会发现有时候在某些库目录下有个 db.opt 文件,那这个文件是干什么用的呢?如果你用vi等编辑器打开看的话,内容很简单,是用来记录该库的默认字符集编码和字符集排序规则用的.也就是说如果 ...
- C语言调用库函数实现生产者消费者问题
#include<stdio.h> #include<stdlib.h> #include<semaphore.h> #include<pthread.h&g ...
- 企业OA面临的问题,以及解决问题的推荐
现在的企业不管大小都趋于软件话,而办公用的OA软件更是成为了企业中不可获取的一环,一个好的软件能让企业发展的更加顺利,而一个不合适的软件可能让公司哀声怨道反而起了反作用! OA ...
- hdu 4751 Divide Groups(dfs染色 或 2-sat)
Problem Description This year is the 60th anniversary of NJUST, and to make the celebration more c ...
- CHARINDEX (Transact-SQL)
SQL Server 2014 其他版本 2(共 3)对本文的评价是有帮助 - 评价此主题 在一个表达式中搜索另一个表达式并返回其起始位置(如果找到). Transact-SQL 语法约定 语法 ...
- 频繁模式挖掘apriori算法介绍及Java实现
频繁模式是频繁地出如今数据集中的模式(如项集.子序列或者子结构).比如.频繁地同一时候出如今交易数据集中的商品(如牛奶和面包)的集合是频繁项集. 一些基本概念 支持度:support(A=>B) ...
- DeNA/上海纵游通过使用AWS大量缩短新款游戏和服务的上线时间
关于DeNA/上海纵游 DeNA 创立于1999年,是世界率先的网络服务公司,业务涵盖社交游戏.电子商务等领域.DeNA总部设于东京,现已于京证券交易所上市(交易代码:2432),在中国.美国.新加坡 ...