有多个document.execCommand(‘copy’),只有第一个有效?

2023-04-03 0 3,131

页面有多个id=txt,现在只有第一个有效。
我希望都有效,能实现吗?
谢谢。

   <button onclick="copy()">复制1</button>
   <p id="txt">第一段内容</p>
   <textarea name="" id="jsTextArea" cols="30" rows="10" style='opacity: 0;position: absolute;' ></textarea>

 <button onclick="copy()">复制2</button>
   <p id="txt">第二段内容 </p>

<script type="text/javascript">
   function copy() {
       const copyElement = document.getElementById('txt');
       const textareaElement = document.getElementById('jsTextArea');
       textareaElement.innerText = copyElement.innerHTML;
       textareaElement.select();
       document.execCommand('copy');
   }
</script>

id 选择器是唯一的,同一个 id 只能用一次,所以上下文只能有个id 是 txt 的元素,你多个元素用同一个 id 是不规范的
还有你的第一个 textarea 把下面的 button 按钮盖住了,导致下面的 button 按钮永远无法被点击

<div class="copy-wrapper">
 <button onclick="copy()">复制1</button>
   <p class="copy-p">第一段内容</p>
   <textarea name="" class="copy-input" cols="30" rows="10" style='opacity: 0;position: absolute; width: 0; height: 0;' ></textarea>
</div>
<div class="copy-wrapper">
 <button onclick="copy()">复制2</button>
   <p class="copy-p">第二段内容</p>
   <textarea name="" class="copy-input" cols="30" rows="10" style='opacity: 0;position: absolute; width: 0; height: 0;' ></textarea>
</div>

function copy(e) {
  const btn = event.target // 拿到当前 dom
  const wrapper = btn.parentNode // 拿到父元素
  const copyP = wrapper.querySelector('.copy-p') // 拿到父元素下面的 p
  const copyInput = wrapper.querySelector('.copy-input') // 拿到父元素下面的 textarea
  console.log(copyInput)
  copyInput.value = copyP.innerHTML
  copyInput.select()
  document.execCommand('copy', true)
   }

一个文档流中, id是唯一的, 同一id只能有一个, 换成class就可以了

有多个document.execCommand(‘copy’),只有第一个有效?
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. JK下载官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. JK下载官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. JK开发团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

JK软件下载官网 技术分享 有多个document.execCommand(‘copy’),只有第一个有效? https://www.jkxiazai.com/1281.html

JK软件应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务