复制-将指定内容添加到粘贴板
代码语言: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;