CODEWITHSUNDEEP
javascriptclipboardcopy-paste
Matt MacPherson
Matt MacPherson

Reputation: 185

Copying to clipboard isn't working

The sample I'm copying from on codepen works fine: http://codepen.io/SitePoint/pen/vNvEwE

<label for="website">Website:</label>
<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>

<label for="twitter">Twitter:</label>
<input type="text" id="twitter" value="http://twitter.com/craigbuckler" />
<button data-copytarget="#twitter">copy</button>

/*
    Copy text from any appropriate field to the clipboard
  By Craig Buckler, @craigbuckler
  use it, abuse it, do whatever you like with it!
*/
(function() {

    'use strict';

  // click events
  document.body.addEventListener('click', copy, true);

    // event handler
    function copy(e) {

    // find target element
    var 
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);

    // is element selectable?
    if (inp && inp.select) {

      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();

        // copied animation
        t.classList.add('copied');
        setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }

    }

    }

})();

When I write the code on localhost or upload to my server, it doesn't work. Pretty sure I'm copying it exactly.

http://loverant.com/bootstraptest/

I'm new to coding so I'm probably just missing something really stupid.

Upvotes: 0

Views: 2779

Answers (1)

Filip Matthew
Filip Matthew

Reputation: 328

As tested on your page http://loverant.com/bootstraptest/ the javascript part is running sooner before the whole DOM is loaded and parsed in the browser. In console there is script.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null error on accessing the document.body.

Move your entire javascript at the bottom just before the closing </body> tag.

<html>
<head>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<label for="website">Website:</label>
	<input type="text" id="website" value="http://www.sitepoint.com/" />
	<button data-copytarget="#website">copy</button>

	<label for="twitter">Twitter:</label>
	<input type="text" id="twitter" value="http://twitter.com/craigbuckler" />
	<button data-copytarget="#twitter">copy</button>

	<script type="text/javascript">
	/*
	Copy text from any appropriate field to the clipboard
	By Craig Buckler, @craigbuckler
	use it, abuse it, do whatever you like with it!
	*/
	(function() {
		'use strict';

	  	// click events
	  	document.body.addEventListener('click', copy, true);

		// event handler
		function copy(e) {
			// find target element
			var
		  		t = e.target,
		  		c = t.dataset.copytarget,
		  		inp = (c ? document.querySelector(c) : null);

			// is element selectable?
			if (inp && inp.select) {
		  		// select text
		  		inp.select();

		  		try {
					// copy text
					document.execCommand('copy');
					inp.blur();

					// copied animation
					t.classList.add('copied');
					setTimeout(function() { t.classList.remove('copied'); }, 1500);
		  		}
		  		catch (err) {
					alert('please press Ctrl/Cmd+C to copy');
		  		}
			}
		}
	})();
	</script>
</body>
</html>

If you will include the javascript from external file, you need to insert it also at the bottom. As an alternative you can use jquery and envelope the whole javascript to $(function() { // your code // }); this will make sure your code will always be launched after the full DOM was parsed by browser and will not matter where you will place your code.

Upvotes: 1

Related Questions