JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<label>User select on/off: <input type="checkbox" checked="checked" /></label>

<p>
Try copying custom text with user-select on and off, by clicking the element below. You will notice it doesn't work with <code>user-select</code> to <code>none</code> (Chrome/Webkit).
</p>

<span id="copy" title="Test copy data">Copy this title attribute</span>

CSS

body.no-user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

body {
  font-family: Helvetica;
  padding: 20px;
}

code {
  display: inline-block;
  border: 1px solid #C0C0C0;
  background-color: #E1E1E1;
  padding: 2px 5px;
  font-size: inherit;
  border-radius: 3px;
}

input[type="checkbox"] {
  vertical-align: middle;
}

span {
  text-decoration: underline;
  cursor: pointer;
}

span:hover {
  text-decoration: none;
}

JavaScript

$('body').addClass('no-user-select');

$('#copy').on('click', function() {
	document.execCommand('copy');
}).on('copy', function (e) {
  e.preventDefault();
  
  var title = $(this).attr('title') + ' ' + ($('body').hasClass('no-user-select') ? 'without' : 'with') + ' user select.';
  
  var oe = e.originalEvent;
  if (oe.clipboardData) {
    oe.clipboardData.setData('text/plain', title);
  } else if (window.clipboardData) {
    window.clipboardData.setData('Text', title);
  }

});

$('input').change(function() {
	$('body').toggleClass('no-user-select');
})