一、数据的粘贴类型
在进行 JS 粘贴时，最常见的数据类型包括文本、HTML、XML、JSON、图片等。
文本：文本是最常见的粘贴类型。在粘贴文本时，可以使用 clipboardData 对象中的 getData 方法来获取粘贴板文本的值。例如：
document.addEventListener('paste', function(event) {
const clipboardData = event.clipboardData;
const text = clipboardData.getData('text');
console.log(text);
});
HTML：粘贴 HTML 时，可以使用 getData 方法并指定格式为 text/html 以获取 HTML 值。例如：
document.addEventListener('paste', function(event) {
const clipboardData = event.clipboardData;
const html = clipboardData.getData('text/html');
console.log(html);
});
XML：针对 XML 粘贴，类似地，可以使用 getData 方法获取粘贴板上的值，并指定格式为 text/xml。例如：
document.addEventListener('paste', function(event) {
const clipboardData = event.clipboardData;
const xml = clipboardData.getData('text/xml');
console.log(xml);
});
JSON：粘贴 JSON 数据时，可以使用 getData 方法来获取其值。例如：
document.addEventListener('paste', function(event) {
const clipboardData = event.clipboardData;
const json = clipboardData.getData('application/json');
console.log(json);
});
图片：对于图片，需要通过粘贴板上的 DataURL 获取其值，然后可以将其渲染到页面上或进行保存。
二、文本粘贴操作
JS 可以用在文本的复制和粘贴操作中，以下是一些常用的技术：
1. 复制文本
使用 execCommand 方法可以完成文本的复制操作，代码如下：
document.getElementById('copyBtn').addEventListener('click', function() {
const copyText = document.getElementById('textToCopy');
copyText.select();
document.execCommand('copy');
});
2. 监听文本的粘贴操作
在文本框中输入内容后，可以使用 event.preventDefault() 来阻止浏览器的默认行为，然后在事件中获取数据：
document.getElementById('pasteBtn').addEventListener('click', function(event) {
event.preventDefault();
const pasteText = event.clipboardData.getData('text');
document.getElementById('pastedText').innerHTML = pasteText;
});
3. 限制文本的粘贴操作
我们可以使用正则表达式过滤非数字字符，限制文本粘贴为数字：
document.getElementById('numberInput').addEventListener('paste', function(event) {
event.preventDefault();
const clipboardData = event.clipboardData;
const pastedData = clipboardData.getData('text/plain');
if (!/^\d+$/.test(pastedData)) {
return;
}
this.value = pastedData;
});
三、HTML 粘贴操作
对于 HTML 的粘贴，可以使用 dataTransfer 的方法来处理，以下是一些技巧：
1. 对于文本和 HTML 的混合粘贴
可以使用 createElment 方法创建一个 div，将粘贴的 HTML 插入其中，然后获取文本和标签信息。JavaScript 代码如下：
document.getElementById('htmlInput').addEventListener('paste', function(event) {
event.preventDefault();
const clipboardData = event.clipboardData;
const pastedData = clipboardData.getData('text/plain');
const htmlData = clipboardData.getData('text/html');
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlData;
const pastedText = tempDiv.textContent || tempDiv.innerText || '';
const pastedHtml = htmlData.replace(pastedText, '');
this.focus();
document.execCommand('insertHTML', false, pastedText);
});
2. 删除粘贴内容中的样式
通过 removeFormat 方法可以删除 HTML 粘贴内容中的样式，代码如下所示：
document.getElementById('htmlInput').addEventListener('paste', function(event) {
event.preventDefault();
const clipboardData = event.clipboardData;
const htmlData = clipboardData.getData('text/html');
this.focus();
document.execCommand('insertHTML', false, htmlData);
document.execCommand('removeFormat', false, null);
});
四、图片粘贴操作
1. 图片的粘贴和保存
在图片粘贴时，可以通过 DataURL 获取图片对象，然后可以将图像用于 canvas 或保存为文件：
document.addEventListener('paste', function(e) {
const items = e.clipboardData.items;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
const blob = items[i].getAsFile();
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
document.body.appendChild(img);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const url = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = url;
a.download = 'image.png';
a.click();
};
reader.readAsDataURL(blob);
}
}
});
2. 限制只能粘贴图片
通过拦截粘贴事件可以限制只能粘贴图片，以下是代码示例：
document.addEventListener('paste', function(e) {
const items = e.clipboardData.items;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
e.preventDefault();
const blob = items[i].getAsFile();
// ...
} else {
e.preventDefault();
}
}
});
五、结语
通过学习以上技巧，我们已经可以实现一些常见的 JS 粘贴操作了。然而需要注意的是，在进行粘贴操作时，需要兼容不同的浏览器。在实际的开发中，我们可以根据不同浏览器版本使用不同的方案，以达到更好的兼容性。
