js复制和粘贴内容

2022-07-13 18:20:42 浏览数 (3)

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

代码语言: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;

1 人点赞