clipboard copy

very basic copy string to clipboard

by Laurens Maneschijn

HTML

<button data-clipboard-text="copythistext1">copy from data attribute value</button>
<a href="#" data-clipboard-text="copythistext2">copy from data attribute value</a>
<a href="#" data-clipboard-text="copythistext3">&copy; &#128203; &#10697; &boxbox;</a>
<br>

<input type="text" id="target1" value="input test">
<button data-clipboard-target="#target1">copy</button>
<hr>
<textarea id="target2">textarea test</textarea>
<button data-clipboard-target="#target2">copy</button>
<hr>
<span id="target3">span test</span>
<button data-clipboard-target="#target3">copy</button>
<hr>
<span class="target4">multi element test 1</span>
<span class="target4">multi element test 2</span>
<button data-clipboard-target=".target4">copy</button>
<hr>
<p id="target5">
	nested element test
	<b>
		subelement
	</b>
</p>
<button data-clipboard-target="#target5">copy</button> (note the whitespace)
<hr>

<hr>copied result string:<br>
<textarea id="result" style="width:400px; height:120px;"></textarea>

<p>
	links:<br>
	<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Events/paste">1</a>
	<a target="_blank" href="https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript">2</a>
	<a target="_blank" href="https://davidwalsh.name/clipboard">3</a>
	<a target="_blank" href="https://clipboardjs.com/">4</a>
	<a target="_blank" href="https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers">5</a>
	<a target="_blank" href="https://www.sitepoint.com/javascript-copy-to-clipboard/">6</a>
</p>

JavaScript

function clipboard_copy(str) {
	var ta = document.createElement('textarea');
	ta.value = str;
	document.body.appendChild(ta);
	ta.select();
	try {
		document.execCommand('copy');
	} catch(e) {
		return false;
	}
	document.body.removeChild(ta);
	return true;
}

$(document.body).on('click', '[data-clipboard-text]', function(e) {
	e.preventDefault();
  var str = $(e.currentTarget).data('clipboard-text');
	clipboard_copy( str );
  $('#result').val(str).select();
});

$(document.body).on('click', '[data-clipboard-target]', function(e) {
	var str, $copytarget;
  $copytarget = $($(this).data('clipboard-target'));
	if ( ! $copytarget.length) {
		return;
	}
	if ( $copytarget.is('input, textarea') ) {
		str = $copytarget.val();
	} else {
		str = $copytarget.text();
	}
	clipboard_copy( str );
	$('#result').val(str).select();
});