如何实现复制粘贴

复制剪切板

原生js

在原生js中存在一个api可以进行copy：document.execCommand('copy',true)

<button id="btn">复制</button>
    <script>
        btn.addEventListener('click',function(){
            var textarea = document.createElement('textarea')
            document.body.appendChild(textarea);
​
            textarea.style.position = 'absolute'
            // textarea.style.clip = 'rect(0px 0px 0px 0px)'
            textarea.value = 'copy的内容'
​
            textarea.select();//将文本框内容选中
            document.execCommand('copy',true)
            // css filter/SVG/Canvas 有clip属性 
        })
    </script>

点击复制按钮后就将textarea中内容复制到剪切板中了，此时我们可以在任意地方进行黏贴。

如何将元素隐藏

• display： none
• opacity: 0
• clip: rect(0,0,0,0)
• position + overflow: hidden

上面四种都是css属性，其中clip不常见。

CSS clip 属性

定义和用法

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

rect (*top*, *right*, *bottom*, *left*)

img {
      position:absolute;
      clip:rect(0px,60px,200px,0px);
  }

兼容极好的 document.execCommand

0. 创建textarea/input
1. 隐藏掉， clip = 'rect(0px 0px 0px 0px)'
2. select， select() 方法用于选择该元素中的文本。
3. value
4. document.execCommand（"copy", true)

“copy” 拷贝当前选中内容到剪贴板 “cut” 剪贴当前选中的文字并复制到剪贴板

npm提供use-clipboard-copy库

use-clipboard-copy库用于react，用法和createRef一样。

function App() {
  const ref = React.createRef()
  useEffect(()=>{
    console.log(ref);
  },[])
  const clipboard = useClipboard()
  const doCopy = function(){
    clipboard.copy()
  }
  return (
    <div className="App">
      <input type="text" ref={clipboard.target} />
      <button onClick={doCopy}>copy</button>
    </div>
  )
}