document.execCommand 使用官方文檔
關注 “弋凡”（YiFan）微信公衆號吧 記錄簡單筆記 做你的最愛
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回類型是布爾值，表示是否支持
aCommandName
命令的名稱
aShowDefaultUI
一個 Boolean， 是否展示用戶界面
aValueArgument
一些命令（例如insertImage）需要額外的參數（insertImage需要提供插入image的url），默認爲null,一般不用
aCommandName 命令 主要有
`backColor`
修改文檔的背景顏色這需要一個<color> 類型的字符串值作爲參數傳入
`bold`
開啓或關閉選中文字或插入點的粗體字效果
`copy`
拷貝當前選中內容到剪貼板
`cut`
剪貼當前選中的文字並複製到剪貼板
`delete`
刪除選中部分
`insertImage`
在插入點插入一張圖片（刪除選中的部分）。需要一個 URL 字符串作爲參數
`paste`
在光標位置粘貼剪貼板的內容
`redo`
重做被撤銷的操作
`removeFormat`
對所選內容去除所有格式
具體使用
只能對輸入框的值進行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="input" value=" 你好 世界 !">
<button id="btn">點我複製</button>
</body>
<script>
let btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
let input = document.querySelector('#input');
// let input = document.getElementById("input"); 2種都可
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
alert("複製成功")
}
})
</script>
</html>
若需進行復制操作又不想有輸入框
暴力解決添加固定定位即可
position: fixed;top: -1000px
快來關注“弋凡”微信公衆號吧
