JSFiddle - React, Tailwind, and code Playground

by aldi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
</div>
<input type='text' value='This text will be copied!'>

CSS

.image {
  width: 200px;
  height: 100px;
  background: blue;
}

.image:hover {
  background: red;
}

input {
  width: 196px;
}

JavaScript

$('.image').hover(function () {
	// will not work, no user action
  $('input').select();
	document.execCommand('copy');
});

$('.image').mousedown(function () {
	//works
  document.execCommand('copy');
});