超級簡單的前端 自動複製功能

實現原理,使用js代碼模擬人操作,就是 選擇數據,copy數據,(如果有需要,還可以幫你在指定位置粘貼數據哦)

第一步:來一個可以選擇的元素,例如

<textarea id = 'copy_element'>要被粘貼的內容</textarea>

第二步:JS模擬選擇數據,這裏選着數據其實是選擇元素,能夠自動獲得文字,如果該元素有圖片,也會在複製板

//獲得元素
let copy_elem = document.getElementById('copy_elemet')
//模擬選擇
copy_elem.select()

第三步:JS模擬點擊複製,將內容複製到粘貼板

//模擬瀏覽器複製命令
document.execCommand("Copy")

題外話:怎樣才能JS直接把要粘貼的字符串放到粘貼板?

 先給出自己的解決方案

在上面的基礎上,將元素的內容變爲要粘貼的字符串,

同時將原始 style=“display:none",就是隱藏起來(千萬不要用hidden,他會讓元素消失,自然不能獲取到值)

<textarea id = "copy_element" style="display: none;">dsfsdfs</textarea>
<button onclick="autoCopy()">點我複製</button>

<script>
  function autoCopy(){
        let copy_content = "我是要被粘貼的內容"
	let copy_elem = document.getElementById("copy_element")
	document.getElementById("copy_element").value = copy_content
	copy_elem.select()
	document.execCommand('Copy')
	alert('複製成功,請粘貼')
}
</script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章