首頁 >web前端 >js教程 >如何跨瀏覽器從 JavaScript 中貼上的資料中截取並提取純文字?

如何跨瀏覽器從 JavaScript 中貼上的資料中截取並提取純文字?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-11 14:17:10900瀏覽

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