self populating clipboard demo

by Victor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.js"></script>
<!-- Target -->
<input class="input" value="<h1>1this is some testing text</h1>">
<!-- Trigger -->
<button class="btn" data-clipboard-target="">
copy that th
</button>
<!-- Target -->
<input class="input" value="<h2>2this is some testing text</h2>">
<!-- Trigger -->
<button class="btn" data-clipboard-target="">
copy that th
</button>
<!-- Target -->
<input class="input" value="<h3>3this is some testing text</h3>">
<!-- Trigger -->
<button class="btn" data-clipboard-target="">
copy that th
</button>
<!-- Target -->
<input class="input" value="<h4>4this is some testing text</h4>">
<!-- Trigger -->
<button class="btn" data-clipboard-target="">
copy that th
</button>
<!-- Target -->
<input class="input" value="<h5>5this is some testing text</h5>">
<!-- Trigger -->
<button class="btn" data-clipboard-target="">
copy that th
</button>

CSS

input {
  pointer-events:none;
  border:none;
  background:none;
  display:inline-block;
  width: 100%;
}

JavaScript

// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

var inputs = document.querySelectorAll('.input');
forEach(inputs, function (index, value) {    inputs[index].setAttribute('class','copy-' + index);
    console.log(index, value); 

});

var buttons = document.querySelectorAll('.btn');
forEach( buttons , function (index, value) {

    buttons[index].setAttribute('data-clipboard-target', '.copy-' + index )
    ;
    console.log(index, value); // passes index + value back!
});

var clipboard = new Clipboard('.btn');

  clipboard.on('success', function(e) {
      alert('You just copied: ' + e.text);

      e.clearSelection();
  });