zoukankan      html  css  js  c++  java
  • 移动端 ios 长按复制兼容方案

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

    在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:
    此属性还有个体验特别好的地方,一些平台或者浏览器上,长按父元素也会直接选中可以选中的区域
  • 相关阅读:
    20.Valid Parentheses
    67.Add Binary
    String、StringBuilder、StringBuffer
    15句乔布斯经典语录(中英文)
    几个高逼格 Linux 命令!
    几个高逼格 Linux 命令!
    24 个必须掌握的数据库面试问题!
    24 个必须掌握的数据库面试问题!
    chrome开发者工具各种骚技巧
    chrome开发者工具各种骚技巧
  • 原文地址:https://www.cnblogs.com/1wen/p/4522729.html
Copyright © 2011-2022 走看看