移動端長按文字復制功能

做移動端項目的時候產品提了一個長按文字復制的功能，第一反應是這個不是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>

 

如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。