前端複製功能

在很多場景我們見到很多一鍵複製的操作（如下圖），最近一個react專案中需要實現一個點選複製的功能，拿出來和道友分享一下。

實現程式碼

 function copyText(value) {
  document.designMode = 'on';
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.setAttribute('value', value);
  input.setAttribute('readonly'
 
, 'readonly')
  input.select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    // console.log('Copy email command was ' + msg);
    if(!successful) {
        throw new Error("copy failed");
    }
    Message.success({
      content: "複製成功！"
 

    });
  } catch (err) {
    console.log('Oops, unable to copy');
    Message.error({
      content: "複製失敗，請重試或手動複製"
    })
  }
  document.body.removeChild(input);
  document.designMode = 'off'
}

實現函式如上所示，designMode說明見參考連結

參考連結

1. 原生JavaScript實現複製/貼上
2. clipboard.js
3. MDN exceCommand 介紹
4. designMode介紹