js 操作剪貼板

plokmju88 發(fā)布于2019-08-23 16:23 / 1591人閱讀

摘要：操作剪貼板官方說明通過可以操作剪貼板的復制剪切粘貼用到的方法和元素元素方法選中輸入框中的所有文本選中輸入框中的部分文本對選中的文本進行復制剪切粘貼操作實現(xiàn)原理是通過操作輸入框，只能操作輸入框，不能操作其它元素。

js 操作剪貼板

MDN 官方說明： https://developer.mozilla.org...

通過 js 可以操作剪貼板的復制剪切粘貼

用到的方法和元素

DOM元素

js 方法

// 選中輸入框中的所有文本
inputElement.select()

// 選中輸入框中的部分文本
inputElement.setSelectionRange(start, end)

// 對選中的文本進行 復制 / 剪切 / 粘貼 操作
document.execCommand("copy/cut/paste")

實現(xiàn)原理

是通過 js 操作 textarea input 輸入框，只能操作輸入框，不能操作其它元素。
所有的 復制／剪切／粘貼 都是要在選中輸入框中的文本之后，才進行操作的。

具體例子

寫個例子展示一下

HTML

測試內(nèi)容：
ABCDEFGHIJKLMNOPQRSTUVWXYZ

js 就直接在 console 中進行調(diào)試了

用 shift + enter 在 console 中換行輸入指令

// 選中文本
var text = document.querySelector("#text");
text.focus();
text.setSelectionRange(3,13);

// 操作文本
document.execCommand("cut")

選中后的樣子

執(zhí)行剪切操作后，再手動粘貼到下面的輸入框中

就是這樣了。

云服務器 GPU云服務器 js剪貼板手機 js復制到剪貼板 js獲取剪貼板word數(shù)據(jù) 剪貼板

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102972.html

相關(guān)文章

Clipboard.js：不用Flash實現(xiàn)剪貼板功能的輕量級JavaScript庫

摘要：發(fā)布了一個專門用于從頁面向本地計算機的剪貼板復制文本的庫。用庫來實現(xiàn)這一功能，問題是這個庫是用一個不可見的來完成剪貼操作，而技術(shù)正被各大瀏覽器廠商冷落，所以勢必要有一個新的方案。 showImg(https://segmentfault.com/img/bVso8J); Zeno Rocha發(fā)布了一個專門用于從web頁面向本地計算機的剪貼板復制文本的JavaScript庫：Clipb...

phodal 2019-08-19 17:27 評論0 收藏0
JS實現(xiàn)將圖片復制到剪貼板

摘要：前言最近項目新增需求用戶能夠拖拽頁面上的圖片文件到文檔。在現(xiàn)有的拖拽事件所提供無法滿足需求的情況下，換一個思路走嘗試將圖片復制到剪貼板。只復制目標節(jié)點的子節(jié)點，對于標簽，如果不額外包裹一層父元素，無法實現(xiàn)圖片復制。前言最近項目新增需求：用戶能夠拖拽頁面上的圖片文件到word文檔。當操作瀏覽器里拖拽圖片至別的程序，在word文檔中展示出獲取到的只是圖片的url地址，而非預期的圖片文件...

MageekChiu 2019-08-22 18:02 評論0 收藏0
JavaScript復制內(nèi)容到剪貼板

摘要：原文鏈接最近一個活動頁面中有一個小需求，用戶點擊或者長按就可以復制內(nèi)容到剪貼板，記錄一下實現(xiàn)過程和遇到的坑。完整代碼如下復制成功總結(jié)以上就是關(guān)于如何實現(xiàn)復制內(nèi)容到剪貼板，附上幾個鏈接兼容性原文鏈接：https://github.com/axuebin/ar... 最近一個活動頁面中有一個小需求，用戶點擊或者長按就可以復制內(nèi)容到剪貼板，記錄一下實現(xiàn)過程和遇到的坑。常見方法查了一下...

ideaa 2019-08-22 14:54 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權(quán)信息超過一定長度的文字就添加版權(quán)信息作者鏈接來源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁上如何實現(xiàn)禁止復制粘貼以及如何破解原生實現(xiàn)點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權(quán)信息超過一定長度的文字就添加版權(quán)信息作者鏈接來源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁上如何實現(xiàn)禁止復制粘貼以及如何破解原生實現(xiàn)點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 評論0 收藏0