剪贴板操作

最新推荐文章于 2023-12-13 14:26:44 发布

逍遥的编程笔记

最新推荐文章于 2023-12-13 14:26:44 发布

阅读量186

点赞数

文章标签：前端 javascript 开发语言复制粘贴

本文链接：https://blog.csdn.net/zhuanyemanong/article/details/131887685

版权

前言

本文介绍剪贴板相关的 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);