前言
本文介绍剪贴板相关的 API 以及实现文本处理效果.
Clipboard API
1. 复制文本到剪贴板
要复制文本到剪贴板,我们可以使用 writeText()方法。
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
console.log("已成功复制到剪贴板:", text);
} catch (err) {
console.error("复制失败:", err);
}
};
// 使用示例
const textToCopy = "你好,剪贴板API!";
copyToClipboard(textToCopy);
2. 从剪贴板中读取文本
要从剪贴板中读取文本,我们可以使用readText()方法
const readFromClipboard = async () => {
try {
const clipboardText = await navigator.clipboard.readText();
console.log('从剪贴板读取的内容:', clipboardText);
} catch (err) {
console.error('读取剪贴板内容失败:', err);
}
};
// 使用示例
readFromClipboard();
实际运用案例
1. 复制添加版权信息
function handleCopyEvent(event) {
// 获取选中的文本
const selection = window.getSelection();
const selectedText = selection.toString();
// 添加版权文本
const copyrightText = "\n\n@版权归鲁迅所有";
const modifiedText = selectedText + copyrightText;
// 使用Clipboard API复制修改后的文本
event.clipboardData.setData("text/plain", modifiedText);
// 阻止默认的复制操作
event.preventDefault();
}
// 为文档添加复制事件监听器
document.addEventListener("copy", handleCopyEvent);
2.登录表单去除空格示例
function handlePasteEvent(event) {
// 从剪贴板获取粘贴的文本
const pastedText = event.clipboardData.getData("text/plain");
// 去除粘贴的文本中的前导和尾随空格
const trimmedText = pastedText.trim();
// 阻止默认的粘贴行为
event.preventDefault();
// 在输入框中插入去除空格后的文本
const input = event.target;
const startPosition = input.selectionStart;
const endPosition = input.selectionEnd;
const currentValue = input.value;
const newValue =
currentValue.slice(0, startPosition) +
trimmedText +
currentValue.slice(endPosition);
input.value = newValue;
// 设置新的光标位置,以便保持焦点位置
const newSelectionPosition = startPosition + trimmedText.length;
input.setSelectionRange(newSelectionPosition, newSelectionPosition);
}
// 为电子邮件和密码输入框添加粘贴事件监听器
const emailInput = document.getElementById("email");
emailInput.addEventListener("paste", handlePasteEvent);
const passwordInput = document.getElementById("password");
passwordInput.addEventListener("paste", handlePasteEvent);
更多
- Clipboard 还支持更多的 MIME type, 还可以自定义类型, 功能很强大。
- 在处理富文本的复制粘贴时,由于不同软件之间的自定义格式,导致需要很多额外的工作量取做兼容