首页 >web前端 >js教程 >如何跨浏览器从 JavaScript 中粘贴的数据中截取并提取纯文本?

如何跨浏览器从 JavaScript 中粘贴的数据中截取并提取纯文本?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-11 14:17:10911浏览

How Can I Intercept and Extract Plain Text from Pasted Data in JavaScript Across Browsers?

在 JavaScript 中检测和检索粘贴的数据(跨浏览器)

Web 应用程序通常需要在数据被粘贴之前捕获和预处理数据粘贴到文本编辑器中。这可能涉及删除特定元素,例如 HTML 标签,同时保留现有格式。然而,传统的粘贴后清理技术可能会破坏之前的文本格式。

为了应对这一挑战,让我们探索一种利用现代浏览器 API 拦截粘贴事件并检索粘贴数据的解决方案:

解决方案 #1:纯文本提取(Firefox 22 和现代浏览器)

对于支持DataTransfer API(例如 IE9、Firefox 22、Chrome、Safari、Edge),以下方法允许从剪贴板数据中选择性提取纯文本:

function handlePaste(e) {
  var clipboardData, pastedData;

  // Stop data actually being pasted into div
  e.stopPropagation();
  e.preventDefault();

  // Get pasted data via clipboard API
  clipboardData = e.clipboardData || window.clipboardData;
  pastedData = clipboardData.getData('Text');

  // Do whatever with pasteddata
  alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

此解决方案利用 e.clipboardData.getData( 'Text') 方法从粘贴事件期间传输的数据中提取纯文本内容。

以上是如何跨浏览器从 JavaScript 中粘贴的数据中截取并提取纯文本?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn