JavaScript 粘贴事件、拷贝事件、获取拷贝的内容、将文本复制到剪贴板

最新推荐文章于 2025-03-27 17:53:15 发布

littleHiuman

最新推荐文章于 2025-03-27 17:53:15 发布

阅读量3.3k

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/hiumanChung/article/details/130484137

版权

本文展示了如何使用JavaScript监听和处理粘贴与拷贝事件，通过event.clipboardData获取或设置剪贴板内容。示例代码中，实现了在粘贴时打印文本，拷贝时设置自定义内容，并提供了异步函数来读取和写入剪贴板数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 粘贴事件、拷贝事件、获取拷贝的内容、将文本复制到剪贴板

// 监听粘贴事件
window.addEventListener('paste', pasteHandler)
function pasteHandler(event) {
  event = event || window.event
  const clipdata = event.clipboardData || window.clipboardData
  const value = clipdata.getData('text/plain')
  console.log(value)
}

// 监听拷贝事件，并将内容改为自定义的值
window.addEventListener('copy', copyHandler)
function copyHandler(event) {
  event = event || window.event
  event.clipboardData?.setData('text/plain', 'hello world')
  event.preventDefault()
}

// -----------------------
// 获取拷贝的内容
async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText()
    console.log('Pasted content: ', text)
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err)
  }
}

// 将文本复制到剪贴板
async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText('hello world222')
  } catch (err) {
    console.error('Failed to copy: ', err)
  }
}

setTimeout(() => {
  copyPageUrl()
  getClipboardContents()
}, 2000)