プログラミング

selectタグで選択中の値(テキスト)をクリップボードにコピーする(clipboard.js)

2020年12月14日

inputとかtextareaだと普通にクリップボードにコピーできるけどselectタグだとできない。

GitHub - zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped https://github.com/zenorocha/clipboard.js/

clipboard.jsを使えばできるのでは？とREADME.mdを眺めてみたもののselectタグのサンプルはない。Issueを眺めてたらそれっぽいのを発見した。

Copy Text of Selected select element · Issue #290 · zenorocha/clipboard.js · GitHub https://github.com/zenorocha/clipboard.js/issues/290

new Clipboard('.btn', {
  text: function(trigger) {
    return document.querySelector('select').value;
  }
});

これだと値が取れるので

new Clipboard('.btn', {
  text: function(trigger) {
    var selector = document.querySelector('#your_special_select_tag');
    var index = selector.selectedIndex;
    var text = selector.options[index].text;
    return text;
  }
});

このような感じで選択中のテキストをクリップボードにコピーできるようにした。

-プログラミング
-