js实现一键复制功能

在开发中，碰到两次一键复制功能的需求了。第一次百度CV大法，再一次碰到同样的需求发现忘记怎么实现的了，索性记录一下。增加自己的记忆，及留下一篇文档供自己复习。

原生js实现复制功能

我主要使用的原生的js，浏览器提供了copy命令的api，可以复制select的内容 document.execCommand("copy")

select() 方法只对 <input> 和 <textarea> 标签有效。

如果需要对其他标签的内容进行复制的话，可以在页面添加一个隐藏的 <textarea> ，然后同步两个标签的内容就可以了

<textarea     ref={copyDom}     style={{opacity: '0', position: 'absolute'}}     value={copyContent}     readOnly></textarea>
const copyDom = useRef()
copyDom.current.select()document.execCommand('copy')

这里需要注意的坑是：textarea中样式我设置的是opacity: 0, position: absolute。为什么隐蔽标签不用display: 'none' ?

1. opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2. visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3. display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

我理解的这里设计初衷是，复制的前提应该是可以编辑。 所以引出这两条规则：

• 不能有disabled， hidden， display: none属性
• height||width 不能为0