复制到剪贴板是't工作

Copying to clipboard isn't working

本文关键字：工作 剪贴板 复制      更新时间：2024-04-03

我在codepen上复制的示例运行良好：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');
      }
    }
    }
})();

当我在localhost上编写代码或上传到服务器时，它不起作用。我很确定我是在复制它。

http://loverant.com/bootstraptest/

我是编码新手，所以我可能只是错过了一些非常愚蠢的东西。

在您的页面上测试http://loverant.com/bootstraptest/在浏览器中加载和解析整个DOM之前，javascript部分运行得更快。在控制台中，访问document.body时出现script.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null错误。

在关闭</body>标记之前，在底部移动整个javascript。

<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>

如果要包含来自外部文件的javascript，则还需要在底部插入它。作为一种替代方案，您可以使用jquery并将整个javascript封装到$(function() { // your code // });中，这将确保您的代码始终在浏览器解析完完整DOM后启动，而不管您将代码放在哪里。

相关文章：