1

クリックしてコピーする機能には多くのソリューションがあることは承知しています。最も人気のあるものの1つはclipboard.jsのようですが、特定のクラスを持つ要素のみをコピーできるソリューションは見つかりませんでした。

例えば：

<div class="wrapper">
   <div class="copytext">I want to copy this text</div>
   <div class="nocopytext">I don't want to copy this text</div>
   <div class="copytext">I also want to copy this text<div>
</div>
<button>Copy only classes with copytext</button>

すべてのクラス「copytext」を選択してクリップボードにコピーするスクリプトを作成するにはどうすればよいですか?

4

1 に答える 1

5

次を使用しdocument.getElementsByClassName()ます。

<div class="wrapper">
   <div class="copytext">I want to copy this text</div>
   <div class="nocopytext">I don't want to copy this text</div>
   <div class="copytext">I also want to copy this text<div>
</div>

<button onclick="copyText()">Copy only classes with copytext</button>
<div id="output"></div>

<script>

function copyText() {

  var outputText = "";
  var targets = document.getElementsByClassName('copytext');

  for( var i = 0; i < targets.length; i++ ) {
    outputText += targets[i].innerText;
  }

  var output = document.getElementById('output');
  output.innerText = outputText;
  var range = document.createRange();
  range.selectNodeContents(output);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  output.style.display = 'none';

}

</script>
于 2016-11-22T16:31:57.237 に答える