Copy to Clipboard

I was working on a custom LinkedIn module for Joomla which required a site administrator to copy a long Authorization Code into a field within the module configuration page. I wanted to provide a native Copy to Clipboard function for modern browsers that support that feature.

I first echo’ed the output into a <p> tag and used the following Javascript to successfully execute the Copy to Clipboard command.

      
        document.addEventListener('DOMContentLoaded', function() {
      
        	var copybtn = document.getElementById('copybtn');
      
        	var authcode = document.getElementById('authcode');
      
        	copybtn.addEventListener('click', function() {
      
        		// select the authorization code text
      
        		var range = document.createRange();
      
        		range.selectNode(authcode);
      
        		window.getSelection().addRange(range);
      
        		try{
      
        			// with text selected, execute the copy command
      
        			var successful = document.execCommand('copy');  
      
        			var msg = successful ? 'successful' : 'unsuccessful';
      
        			if (msg == 'successful') copybtn.value = 'Copied!';
      
        			console.log('Copy authorization code command was ' + msg);  
      
        		} catch(err) {  
      
        			console.log('Oops, unable to copy');  
      
        		}
      
        		// remove the selection
      
        		window.getSelection().removeAllRanges();
      
        	});
      
        });

But because hyphens are sometimes used in the Authorization Code, the output would wrap and correcting the wrap using CSS would cause horizontal scrollbars and require more styling. So I decided to output the Authorization Code as the value of an <input> text field. However, the same Javascript caused additional whitespace to be prepended to the Authorization Code when pasting it into the field within the module configuration page. To fix this, I had to modify the Javascript as follows:

      
        document.addEventListener('DOMContentLoaded', function() {
      
        	var copybtn = document.getElementById('copybtn');
      
        	var authcode = document.getElementById('authcode');
      
        	copybtn.addEventListener('click', function() {
      
        		// select the authorization code value
      
        		authcode.setSelectionRange(0, authcode.value.length);
      
        		try{
      
        			// with text selected, execute the copy command
      
        			var successful = document.execCommand('copy');  
      
        			var msg = successful ? 'successful' : 'unsuccessful';
      
        			if (msg == 'successful') copybtn.value = 'Copied!';
      
        			console.log('Copy authorization code command was ' + msg);  
      
        		} catch(err) {  
      
        			console.log('Oops, unable to copy');  
      
        		}
      
        		// remove the selection
      
        		window.getSelection().removeAllRanges();
      
        	});
      
        });

	document.addEventListener('DOMContentLoaded', function() {
	var copybtn = document.getElementById('copybtn');
	var authcode = document.getElementById('authcode');
	copybtn.addEventListener('click', function() {
	// select the authorization code text
	var range = document.createRange();
	range.selectNode(authcode);
	window.getSelection().addRange(range);

	try{
	// with text selected, execute the copy command
	var successful = document.execCommand('copy');
	var msg = successful ? 'successful' : 'unsuccessful';
	if (msg == 'successful') copybtn.value = 'Copied!';
	console.log('Copy authorization code command was ' + msg);
	} catch(err) {
	console.log('Oops, unable to copy');
	}

	// remove the selection
	window.getSelection().removeAllRanges();
	});
	});