首页 > web前端 > js教程 > 如何在不同浏览器中可靠地检索粘贴时的剪贴板数据?

如何在不同浏览器中可靠地检索粘贴时的剪贴板数据?

Barbara Streisand
发布: 2024-12-11 20:25:11
原创
387 人浏览过

How Can I Reliably Retrieve Clipboard Data on Paste Across Different Browsers?

跨浏览器检索粘贴事件剪贴板数据的方法

问题

捕获粘贴事件并访问要粘贴的数据证明具有挑战性浏览器。目标是预先从传入的粘贴文本中删除 HTML 标签,同时保留富文本编辑器中的现有格式。

解决方案

解决方案#1(仅限纯文本,Firefox 22):

此方法适用于 IE6、Firefox 22、Chrome、Safari 和 Edge (在 IE9 中测试)。它擅长捕获纯文本,但缺乏对 HTML 粘贴或 22 之前的 Firefox 版本的支持。

function handlePaste(e) {
  // Prevent data from being pasted directly into the div
  e.stopPropagation();
  e.preventDefault();

  // Access the clipboard data through the API
  let clipboardData = e.clipboardData || window.clipboardData;

  // Extract the pasted text
  let pastedData = clipboardData.getData('Text');

  // Process the pasted data as desired
  alert(pastedData);
}

// Register the paste event listener on the editable div
document.getElementById('editableDiv').addEventListener('paste', handlePaste);
登录后复制
<div>
登录后复制

以上是如何在不同浏览器中可靠地检索粘贴时的剪贴板数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板