前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js复制和粘贴内容

js复制和粘贴内容

作者头像
fastmock
发布2022-07-13 18:20:42
6.2K0
发布2022-07-13 18:20:42
举报
文章被收录于专栏:fastmockfastmock

复制-将指定内容添加到粘贴板

代码语言:javascript
复制
/**
 * copyToClip
 * @param content
 * @param callback
 */
export const copyToClip = (content: string, callback?: () => void) => {
  var aux = document?.createElement?.('input');
  aux?.setAttribute?.('value', content);
  document?.body?.appendChild?.(aux);
  aux?.select();
  document?.execCommand('copy');
  document?.body?.removeChild?.(aux);
  return callback?.();
};

粘贴 js不能直接读取粘贴板内容,下面的代码在多数环境下不生效

代码语言:javascript
复制
const text = await navigator?.clipboard?.readText?.();

我们采取变通的方案来处理。 1、在页面中添加一个input输入框,将其绝对定位到页面中不可见的位置

代码语言:javascript
复制
<input
  type='text'
  id='text-all'
  key='text-all'
  onPaste={(e) => handlePaste(e)}
  style={{ position: 'absolute', top: -10000, zIndex: 10000 }}
/>

监听到ctrl-v事件时,先让上面的input获得焦点,再手动触发他的paste事件,这时input会填充粘贴板中的内容

代码语言:javascript
复制
const hideInput: HTMLInputElement = document.getElementById('text-all') as any;
hideInput?.focus();
hideInput?.dispatchEvent(new Event('paste', { bubbles: true }));

给这个input添加onPaste事件,在事件处理函数中获取input的内容,或者获取粘贴板的内容

代码语言:javascript
复制
const clipboardData = e?.clipboardData || e.originalEvent?.clipboardData;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档