时间戳

首页 > 解决方案 > document.execCommand('copy') 命令在 Chrome 中不起作用

javascript - document.execCommand('copy') 命令在 Chrome 中不起作用

问题描述

HTML

<input type="text" id="clipboard">
<button class="share-button">share</button>

JS

  text = 'text to be copied';

  document.querySelector('.share-button').addEventListener('click', () => {
      var element = document.querySelector('#clipboard');
      element.setAttribute("value", text);
      console.log(element.value);
      element.select();
      document.execCommand('copy');

  });

CSS

#clipboard {
  position: absolute;
  visibility: hidden;
}

我正在尝试将文本复制到剪贴板，但我不明白我的代码有什么问题。我从 MDN 文档中复制了代码。

当我做这些事情时它不起作用

#clipboard {
  position: absolute;
}

// or

#clipboard {
  visibility: hidden
}

// or

#clipboard {
  display: none
}

标签： javascripthtml

解决方案

const share_btn = document.querySelector('.share-button');

function copy_to_clipboard(stritem){
    const el = document.createElement('textarea');
    el.value = stritem;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    window.alert('Successfully copied to your clipboard!'); 
}

text = 'text to be copied';
share_btn.addEventListener('click', ()=>{copy_to_clipboard(text);});
<button class="share-button">share</button>

推荐阅读