手機端長按文字複製

2022-07-23 18:51:15 字數 843 閱讀 9274

css:

-webkit-user-select: none;可以限制長按複製

相容性:

設定或檢索是否允許使用者選中文字。 

ie6-9不支援該屬性,但支援使用標籤屬性 onselectstart=」return false;」 來達到 user-select:none 的效果;safari和chrome也支援該標籤屬性; 

直到opera12.5仍然不支援該屬性,但和ie6-9一樣,也支援使用私有的標籤屬性 unselectable=」on」 來達到 user-select:none 的效果;unselectable 的另乙個值是 off; 

除chrome和safari外,在其它瀏覽器中,如果將文字設定為 -ms-user-select:none;,則使用者將無法在該文字塊中開始選擇文字。不過,如果使用者在頁面的其他區域開始選擇文字,則使用者仍然可以繼續選擇將文字設定為 -ms-user-select:none; 的區域文字; 

對應的指令碼特性為userselect。

user-select:none | text | all | element 

none:文字不能被選擇 

text:可以選擇文字  預設值

all:當所有內容作為乙個整體時可以被選擇。如果雙擊或者在上下文上點選子元素,那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素。 

element:可以選擇文字,但選擇範圍受元素邊界的約束

設定成-webkit-user-select: text;ios手機會出現不能複製的情況,解決方案是:

必須在父元素上面新增-webkit-user-select: text;否則就算子元素設定了此屬性,父元素沒有設定,也不能複製。

Vue 長按文字複製事件實現

longpress.js export default is not afunction,but has to be if compname console.warn warn 定義變數 let presstimer null 定義函式處理程式 建立計時器 1秒後執行函式 let start e i...

移動端 ios 長按複製相容方案

移動端頁面,需要複製一段文字碼。在ios中,長按文字區域,預設選中的範圍,超出了我長按的文字區域,把上面的和下面的另乙個div的文字也給我包含進來了,並不是我想要的!舉個例子 如下圖 1.我長按的區域是紅色方框內的區域,想要複製框裡的文字內容。2.結果卻是下圖,即便 ios 上能再稍微操作一下 變成...

移動端h5文字長按複製 H5實現移動端複製文字功能

前言 移動端專案開發中,經常遇到需要複製文字的場景,今天咱們就來聊一下,移動端複製文字的那些事 效果預覽 背景分析 業務需求很簡單,將指定的文字 例如 關鍵字 文案描述等 複製到手機的剪貼簿上,方便使用者直接進行貼上 解決方案 相關api document.execcommand setselect...