原生 js 實現點選按鈕複製文字

2022-03-03 04:02:58 字數 1049 閱讀 1293

最近遇到乙個需求,需要點選按鈕,複製 標籤中的文字到剪下板

之前做過複製輸入框的內容,原以為差不多,結果發現根本行不通

嘗試了各種辦法,最後使了個障眼法,實現了下面的效果

一、原理分析

瀏覽器提供了 copy 命令 ,可以複製選中的內容

document.execcommand("

copy

")

如果是輸入框,可以通過select()方法,選中輸入框的文字,然後呼叫  copy 命令,將文字複製到剪下板

但是 select() 方法只對 和"

copytext()

">copy

js 部分

親測,firefox 48.0,chrome 60.0,ie 8 都能用

三、一鍵複製

分享乙個自己工作中用到的一鍵複製方法

/*

* * 一鍵貼上

* @param id [需要貼上的內容]

* @param attr [需要 copy 的屬性,預設是 innertext,主要用途例如賦值 a 標籤上的 href 鏈結]

* * range + selection

* * 1.建立乙個 range

* 2.把內容放入 range

* 3.把 range 放入 selection

* * 注意:引數 attr 不能是自定義屬性

* 注意:對於 user-select: none 的元素無效

* 注意:當 id 為 false 且 attr 不會空,會直接複製 attr 的內容 */

copy (id, attr)

else

} else

try

catch

(e)

if(attr)

}

原生js實現點選按鈕複製文字

封裝函式引數 id 要複製的元素id,paramtype 複製的屬性內容,一般是innertext copywxid id,paramtype else else try catch e if paramtype 原理總結 1.先建立全透明div,並把要複製的內容放入其innertext 2.建立r...

原生 js 實現複製文字

html 賬號 123456,密碼 123457 js var text document.getelementbyid copytext innertext var input document.getelementbyid copyinput document.getelementbyid co...

用js實現點選複製文字

function copytext ele else 移除選中的元素 window.getselection removeallranges 對於這段 的相容性,實際使用中對於大多的普通瀏覽器和android端都是比較相容的,但移動端uc和qq瀏覽器有乙個小問題,原因是因為uc中document.e...