clipboard 剪切板属性

navigator.clipboard

navigator.clipboard属性用于访问系统剪切板（不兼容IE）。

js另一个属性document.execCommand()也可以访问系统剪切板，不过即将被废弃。

部分浏览器在使用Clipboard API时，会弹出用户授权弹窗，如果没有授权则不允许读取或修改剪切板内容。

常用方法：

• readText()

  • 用于读取系统剪切板内容并返回一个promise对象

  • var promise = navigator.clipboard.readText()
    

• writeText()

  • 用于想系统剪切板写入指定字符串并返回一个promise对象

  • var promise = navigator.clipboard.writeText(text)
    

模拟复制、粘贴、剪切功能

代码实现：

<div class="test-clipboard">
  <div><input type="text" id="clipboard-input" /></div>
  <button onclick="copy()">复制</button>
  <button onclick="paste()">粘贴</button>
  <button onclick="clip()">剪切</button>
</div>

const input = document.getElementById('clipboard-input')
const clipboard = navigator.clipboard

// 判断输入框是否为空
function checkinput() {
  if (!input.value) {
    alert("请先输入内容！");
  }
  return !!input.value
}

// 复制
function copy() {
  let valid = checkinput()
  if (valid) {
    clipboard.writeText(input.value).then(() => {
      alert('复制成功！');
    })
  }
}

// 剪切
function clip() {
  let valid = checkinput()
  if (valid) {
    clipboard.writeText(input.value).then(() => {
      input.value = ""
      alert('剪切成功！');
    })
  }
}

// 粘贴
function paste() {
  clipboard.readText().then((res) => {
    input.value += res
  })
}

预览（如果没有效果，可点击前往codepen预览）：

参考文献

js【剪切、复制、粘贴】功能实现 (opens new window)

MDN Clipboard API (opens new window)