移動端長按文字複製功能

作移動端項目的時候產品提了一個長按文字複製的功能，第一反應是這個不是Webview自帶的功能嗎?

打開APP本身試了下，發現果真沒法長按複製，後來發現是由於公共CSS文件中設置了 user-select:none ，之因此設置該屬性是由於html中可能有些地方不想讓用戶複製文字，或是用a標籤作了個點擊按鈕，點快的時候文字會被選中，很醜，這個時候可使用下面的方案禁止文字選中。好比常見的鼠標點快了文字會被選中而且出現難看的色塊。

 user-select 屬性共有四個值，分別爲：

none:文本不能被選擇

text:能夠選擇文本

all：當全部內容做爲一個總體時能夠被選擇。若是雙擊或者在 上下文上點擊子元素，那麼被選擇的部分將是以該子元素 向上回溯的最高祖先元素。

element:能夠選擇文本，但選擇範圍受元素邊界的約束

注意事項：

一、搜索的時候看到別人博客說在iphone7 ios10的時候沒法選中，須要給父元素添加 user-select:text 原文連接：https://www.cnblogs.com/surfaces/p/6432712.html。公司找了同事的iphone7測試了下，沒發現問題，可是保險起見，仍是加上了

二、 user-select 屬性寫的時候須要添加瀏覽器前綴，固然如今通常在構建項目的時候都有postcss或者Autoprefixer插件自動添加

三、須要複製的元素儘可能用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>

 

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