js 操作剪貼簿
js 操作剪貼簿
MDN 官方說明: https://developer.mozilla.org...
通過 js 可以操作剪貼簿的 複製 剪下 貼上
用到的方法和元素
DOM元素
<textarea> </textarea> <input/>
js 方法
// 選中輸入框中的所有文字 inputElement.select() // 選中輸入框中的部分文字 inputElement.setSelectionRange(start, end) // 對選中的文字進行 複製 / 剪下 / 貼上 操作 document.execCommand('copy/cut/paste')
實現原理
是通過 js
操作 textarea
input
輸入框,只能操作輸入框,不能操作其它元素。
所有的 複製/剪下/貼上
都是要在選中輸入框中的文字之後,才進行操作的。
具體例子
寫個例子展示一下
HTML
<label for="text">測試內容:</label> <textarea name="text" id="text" cols="30" rows="1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</textarea> <textarea name="text" id="test" cols="30" rows="2" placeholder=""></textarea>
js
就直接在 console
中進行除錯了
用 shift + enter
在 console
中換行輸入指令
JS
// 選中文字 var text = document.querySelector('#text'); text.focus(); text.setSelectionRange(3,13); // 操作文字 document.execCommand('cut')
選中後的樣子
執行剪下操作後,再手動貼上到下面的輸入框中
就是這樣了。