复制到剪贴板不起作用

Question

我从 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');
      }

    }

    }

})();

当我在本地主机上编写代码或上传到我的服务器时，它不起作用。很确定我完全复制了它。

http://loverant.com/bootstraptest/

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

Answer 1

正如在您的页面上测试的那样 http://loverant.com/bootstraptest/ javascript 部分运行在整个 DOM 加载之前更快并且在浏览器中解析。在控制台中，访问 document.body.

时出现 script.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null 错误

将整个 javascript 移到底部 </body> 结束标记之前。

<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 被浏览器解析后启动，并将无论您将代码放在哪里。

复制到剪贴板不起作用

Copying to clipboard isn't working

javascript

clipboard

copy-paste