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的方式,调用后台运行的钥匙功能)

时间: 2024-08-04 04:33:08

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

Android TextView实现长按复制文本功能的方法

上网查询Android开发实现长按复制文本功能的方法很多,有什么改写系统长按响应,有用EditView控件替换TextView的方法,还有自定义控件什么的,总之都比较麻烦,而且效果也不好. 其实现在新的Android开发只需要增加一行代码就可以实现这个功能,在布局文件的TextView控件属性中增加这么一句就行:android:textIsSelectable="true" 但查询资料说只有android sdk 11起才支持,v11以下则不行了.我测试了一下在Android4没问题,

小程序 长按复制文本

1.小程序如果需要长按复制文本,首先必须使用<text>标签,并且将selectable属性设置为true <text selectable='true'>xxxx</text> 2.按钮复制,使用微信内置api:wx.setClipboardData API wx.setClipboardData({ data: '需要复制的数据', success: function (res) { //复制成功的操作 } }); 原文地址:https://www.cnblogs.

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

(注意,增加之后需要对input的另外设置,不然输入框无法输入)场景:H5出现一个按钮需要长按几秒展示动画的,如:skcs.net-tactic.com/wap/peace/index,这时就需要用到禁止苹果的 ios机默认存在长按复制选择,用以下代码取消: *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/

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

1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属性值,只能复制文本元素节点:(解决方案:可以把文字颜色设成背景色就能达到隐藏看不见的效果不影响显示): 直接上代码:以下是伪代码 js代码: function img() { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分i

Clipboard 自动复制功能,ios复制失败,换方案 user-select: text ;长按复制 (ios 兼容,长按复制)

Clipboard 自动复制功能,嵌套app内跳转的页面,ios 自动复制失败(该ios机子,微信,浏览器打开复制没有问题) 暂时换方案    user-select: text ;长按复制 (ios 兼容低版本,长按复制) 最好的 方案是让 app 给出原生复制的 方法.直接调用 可 自动复制 <div class="item-detail"> <div class="line" style>  <!-- user-select: t

点击按钮复制文本内容 -- jquery Zclip -- Zero Clipboard

今天,经理让我做一个功能,复制文本框中的代码.以前在其他网站上经常见到过这个功能.只不过没有细细研究,今天也是个机会. 这里我使用的事jquery的zeroclipboard来实现复制功能.代码内容很简单,网上也有很多资料. Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf . 具体实现如下: jsp页面:  <p>                               

iOS系列 基础篇 08 文本与键盘

iOS系列 基础篇 08 文本与键盘 目录: 1. 扯扯犊子 2. TextField 3. TextView 4. 键盘的打开和关闭 5. 打开/关闭键盘的通知 6. 键盘的种类 7. 最后再扯两句 1. 扯扯犊子 与Label一样,TextField和TextView也是文本类控件,是可以编辑文本内容的. 在控件内容编辑方面,三者都可以通过代码.双击该控件和属性检查器中的Text属性来实现,但是TextField和TextView比Label多了一个键盘的使用. 另外,TextField和T

移动端阻止默认长按选中文本和弹出菜单、点击阴影

css:/*阻止默认长按选中文本*/* { /*ios*/ -webkit-touch-callout:none; touch-callout:none; /*安卓*/ -webkit-user-select: none; user-select: none;} js: //阻止默认长按出现菜单 window.ontouchstart = function(e) { e.preventDefault();}; /*阻止默认点击出现阴影*/ *{-webkit-tap-highlight-colo

克服 iOS HTML5 音频的局限

尽管 HTML5 音频表现出色,但作为一个仍在开发的规范,它仍有很多局限.移动版 Safari 甚至引入了更多的限制.在本文中,您将了解 HTML5 在移动版 Safari 方面的局限性.一些工作示例提供了相应的解决方案和全面的变通方法.通过本文您将了解在移动版 Safari 中使用 audio sprite 的好处,并尝试使用几个独到的解决方案来绕过 iOS 中的 HTML5 局限. 目录[-] 常用的缩略语 HTML5 音频的局限性 格式支持 表 1. HTML5 视频格式支持 清单 1.