Javascript 复制到剪贴板包括目标元素的父级

编辑-其他信息：

简化沙箱-

演示：

这个问题似乎并没有发生在firefox上，而是发生在chrome和其他浏览器上

---

我有一个div，它呈现一个模板（在上面的链接中简化），该模板连接到一个按钮，该按钮调用一个复制到剪贴板的函数

但是，当粘贴复制到剪贴板的内容时，内容居中，进一步检查后，容器div样式（

{display:'flex'，margin:'0 auto'，justifyContent:'center}

）也包括在所选内容中

如何从副本中排除父div，它应该只针对文本模板中的html代码（最好是我通过id定位的内容-

#签名预览工作区

），因此不应该居中

---

提前感谢

尝试使用

ref

而不是直接搜索文档

const copyTextToClipboard=el=>{
常量范围=document.createRange（0）；
范围。选择节点（el）；
getSelection（）.removeAllRanges（）；
window.getSelection（）.addRange（范围）；
文件。执行命令（“副本”）；
getSelection（）.removeAllRanges（）；
};
常量应用=（）=>{
const ref=React.useRef（）；
const handleCopyClick=React.useCallback（（）=>{
复制文本到剪贴板(
ref.current.querySelector（“签名预览工作区”）
);
}，[ref]）；
返回(
复制上面的文本
);
};
ReactDOM.render（，document.getElementById（“根”）；

---

很抱歉，我完全误解了您要找的内容..我以为您希望删除所有样式

解决方法似乎只是简单地将要复制的“模板”包装到

div

中，而不应用任何样式

这是一个镀铬的

const{useRef，useCallback}=React；
const{render}=ReactDOM；
函数App（）{
const ref=useRef（）；
const copyTextToClipboard=el=>{
让范围=document.createRange（0）；
范围。选择节点（el）；
getSelection（）.removeAllRanges（）；
window.getSelection（）.addRange（范围）；
文件。执行命令（“副本”）；
getSelection（）.removeAllRanges（）；
};
const handleCopyClick=useCallback（（）=>{
复制文本到剪贴板(
ref.current.querySelector（“签名预览工作区”）
);
}，[ref]）；
返回(
handleCopyClick（）}>复制
);
}
render（，document.getElementById（“根”）；

如果您已经在使用NPM，请尝试名为“剪贴板”的模块你是在使用类还是功能组件？一个class@MattOestreichI试图在Firefox中复制它，但当我粘贴时，我得到一个空行…我如何复制它？…你是这样使用它的吗？答案是肯定的。只是为了我自己的理智-你是在使用

useCallback

来防止在每次重新渲染时重新创建该方法吗更精简的方法非常感谢您，但不幸的是，当我粘贴到文本区域时，带有样式的div仍在包装模板

@Apswak您使用什么浏览器？@teimurjan Brave/Chrome，我在这里重新创建了它：如果您单击“复制”并将其粘贴到文本字段中（甚至可能是gmail的电子邮件撰写文本输入）你会看到它是居中的，经过检查，它得到了呈现模板的div的样式。在这个简化的示例中，你会看到它似乎也复制了按钮？哇！想知道为什么，无论如何，这已经完成了。非常感谢@MattOestreich的耐心，legend。很高兴提供帮助-感谢你忍受了我所有的问题还有imgur links lol..很高兴我们能够解决这个问题！！干杯编辑：为了详细说明，我认为这是因为您正在设置应用了样式的

div

的内部HTML，因此该

div

的内容继承了这些样式？