React 點選按鈕實現內容複製功能

2022-07-12 21:06:29 字數 459 閱讀 8493

思路:

1.給要複製的內容容器新增乙個標籤(可以是id,可以是類名等),通過dom技術獲取該容器物件;

2.建立range物件(某個區域內連續的內容),把該容器物件放進去;

3.將range物件新增到selection物件裡(以便將它暴露出來,聯合document.execcommand('copy')命令,實現複製功能);

4.給乙個button,繫結copy事件。

ps: 1.對於selection物件和range物件不明白的,請跳轉至

2.此處的message是引用的antd裡的message元件;

3.該**與是否採用react關係並不大。

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

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

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

最近遇到乙個需求,需要點選按鈕,複製 標籤中的文字到剪下板 之前做過複製輸入框的內容,原以為差不多,結果發現根本行不通 嘗試了各種辦法,最後使了個障眼法,實現了下面的效果 一 原理分析 瀏覽器提供了 copy 命令 可以複製選中的內容 document.execcommand copy 如果是輸入框...

js點選按鈕複製內容到貼上板

複製內容到貼上板,就是要選擇需要複製的內容並執行document.execcommand copy 命令 複製內容到貼上板 function copytoclipboard elemid catch e console.log 複製成功 return succeed 如果應用場景複雜些,可能有多種元...