移动端页面,需要复制一段文字码。

在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域,

把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的!

举个例子:

如下图:

  1.我长按的区域是红色方框内的区域,想要复制框里的文字内容。

  2.结果却是下图,即便 ios 上能再稍微操作一下、变成我想要的复制区域,但是这样用户体验太差

  3.得想办法长按后 立刻变成如下图的情况

那么,想到了平时在其他站点上用到的一键复制,比如博客园的复制博客里的代码:

 查了下有关页面复制功能,发现有个ZeroClipboard基于flash+js实现的。
拿到手机上测了一下,大部分手机默认是没flash的,根本就不好用,而且我也不想用flash有关的东西。pass!
 
后来又查到了什么: document.body.createTextRange(),window.getSelection,然后一堆兼容代码,》博客在这《
我真是没耐心看这个,为了这么小的一个功能,写这么多代码。然后各种查阅,也没想到什么好办法。
 
后来我又在想为什么长按后会把同级的其他div里的内容选中呢?如果我把其他div的z-index设置为不同高度,会不会就好了呢?
当然我这个页面都是用的绝对定位,本来就是脱离了文档流的,有点异想天开了。
不过就是这个异想天开,把我的思绪抓到了dom上,灵光一现,我想到了一个关键词:
 
 
我把其他同级的div设置为不能选中,那范围应该就不会扩大了吧!
然后搜索发现了一个css3属性: user-select
 
               》三方详解地址《
 
 
 
然后测试,通过!太简单了,添加两个css类就搞定了!
 
 
 
好吧!还是很高兴的,虽然也不是多牛逼一样。
 
“偷懒”有时候真是一种动力,要善于用简单的方法去解决问题,看到麻烦的方案,就应该想更简单的方法。
一条思路走不通,不要过于执着,换个思路也许就更好。
 
确实感觉解决了一个很简单的问题,不怎么牛逼,都不好意思写博客一样。
但是我还是肯定有朋友遇到这种问题,分享出来吧,与大家共勉。
 
PS:
发现在某些节点情况下,会选中整个父元素。
现在我有两个页面,iphone6微信下测试都成功,
iPhone5,微信里其中有一个页面会选中父元素,另一个页面正常。
有点无语,暂时没想到新解决办法。
 
PS:
此属性还有个体验特别好的地方,一些平台或者浏览器上,长按父元素也会直接选中可以选中的区域

移动端 ios 长按复制兼容方案的更多相关文章

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

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

  2. Clipboard.js : 移动端浏览器实现网页内容复制

    .bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size ...

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

    Clipboard 自动复制功能,嵌套app内跳转的页面,ios 自动复制失败(该ios机子,微信,浏览器打开复制没有问题) 暂时换方案    user-select: text ;长按复制 (ios ...

  4. Emoji表情符号兼容方案(适用ios,android,wp等平台)

    http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(え ...

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

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

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

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

  7. H5移动端实现一键复制或长摁复制

    今天接到了一个新的需求,要求我们对表单中的某一个字段进行复制,这个表单是不可选的,拿到需求的时候有点懵,不清楚下手点在哪,后来网上找了找,终于有了点眉目,感觉网上有些是实现不了的,特地在这里记录下进行 ...

  8. [ios2]Emoji表情符号兼容方案 【转】

    Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji ...

  9. Emoji表情符号兼容方案

    Emoji表情符号兼容方案 一 什么是Emoji    emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. em ...

随机推荐

  1. ios之VFL的补充(三)

    @"|-50-[buttonA(80@100)]-[buttonB(90@200)]-50-|" 这条语句的含义是:“左右边距都为50,中间有两个按钮,相隔缺省宽度,一个控件宽度为 ...

  2. java protected 与默认权限的区别

    作用域   当前类    同package   子孙类 其他package  public √   √  √ √  protected √ √ √ ×  friendly(default) √ √ × ...

  3. JNI开发示例

    安装:eclipse(http://www.eclipse.org/).CDT(C/C++ Development Tooling).ADT(Android Development Tools) ht ...

  4. 解决 01-Jul-2016 10:49:05.875 WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoaderBase.clearReferencesJdbc The web application [ROOT] registered the JDBC driver [com.mysql.jdbc.D

    01-Jul-2016 10:49:05.875 WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoade ...

  5. 分享一些无特征PHP一句话

    分享些不需要动态函数.不用eval.不含敏感函数.免杀免拦截的一句话.(少部分一句话需要php5.4.8+.或sqlite/pdo/yaml/memcached扩展等) 原理:https://www. ...

  6. Asp.Net customErrors与httpErrors的区别

    先看一下简单的对比 customErrors Asp.Net级别的错误处理程序,只处理Asp.Net应用抛出的异常(404,403,500..) 在IIS7+的服务器依然可用(IIS7之前就引进了) ...

  7. [leetcode]Maximum Product Subarray @ Python

    原题地址:https://oj.leetcode.com/problems/maximum-product-subarray/ 解题思路:主要需要考虑负负得正这种情况,比如之前的最小值是一个负数,再乘 ...

  8. win7下虚拟机安装mac 转载自 http://itbbs.pconline.com.cn/50602805.html

    最近,不断有人问起,如何在vmware下安装MAC系统.起因是以前曾发过一篇贴,在vmware8下安装MAC的方法.于是,重新下载了最新版苹果系统10.8.5,终于成功安装.现将注意事项及过程与各位朋 ...

  9. No module named flask.ext.sqlalchemy.SQLALchemy

    在学习<OReilly.Flask.Web.Development>的时候,按照书的例子到了数据库那一章,在运行python hello.py shell的时候出现了“ImportErro ...

  10. GNU Radio 之 rtl-sdr

    http://sdr.osmocom.org/trac/wiki/rtl-sdr 我使用的是去年买的一个电视棒(ezcap DVB-TFMDAB),50多元,它的频宽为52Mhz - 2.2GHz ! ...