zoukankan      html  css  js  c++  java
  • 移动端长按文字复制功能

    做移动端项目的时候产品提了一个长按文字复制的功能,第一反应是这个不是Webview自带的功能吗?

    打开APP自己试了下,发现果然无法长按复制,后来发现是因为公共CSS文件中设置了 user-select:none ,之所以设置该属性是因为html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中。比如常见的鼠标点快了文字会被选中并且出现难看的色块。

     user-select 属性共有四个值,分别为:

    none:文本不能被选择

    text:可以选择文本

    all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。

    element:可以选择文本,但选择范围受元素边界的约束

    注意事项:

    1、搜索的时候看到别人博客说在iphone7 ios10的时候无法选中,需要给父元素添加 user-select:text 原文链接:https://www.cnblogs.com/surfaces/p/6432712.html。公司找了同事的iphone7测试了下,没发现问题,但是保险起见,还是加上了

    2、 user-select 属性写的时候需要添加浏览器前缀,当然现在一般在构建项目的时候都有postcss或者Autoprefixer插件自动添加

    3、需要复制的元素尽量用p标签,其他元素会存在复制不了的问题

    示例如下:

    css代码如下:

    .contentBox,.contentBox p{
        -webkit-user-select:text;
        -moz-user-select:text;
        -ms-user-select:text;
        user-select:text;
    }

    dom结构如下:

    <div class="contentBox">
        <p>我是需要复制的内容</p>
    </div>

    如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

  • 相关阅读:
    poj 1084 Brainman(归并排序)
    Poj 2299 Ultra-QuickSort(归并排序)
    poj 1068 Parencodings(栈)
    Poj 2499 Binary Tree(贪心)
    Poj 2255 Tree Recovery(二叉搜索树)
    poj 2021 Relative Relatives(暴力)
    Poj 2092 Grandpa is Famous(基数排序)
    解决UMeditor上传图片失败
    解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll;的网页在iPhone iOS Safari浏览器中滑动不流畅问题
    Kindeditor上传图片报错
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/9023741.html
Copyright © 2011-2022 走看看