javascript - 复制到剪贴板在 JavaScript 代码中不起作用，但在 Chrome 控制台上起作用

Question

在我的代码中，我需要获取 key

HTML

<div class="span3" ng-if="ec.name==='AccessTokenKey'">
  <input class="mTop10 span9" type="text" ng-model="token" id="encpText" />
  <button class="btn btn-alt btn-small " ng-click="encryptMD5Get()" title="Copy to clip board"><i class="fa fa-clipboard" aria-hidden="true"></i></button>
</div>

JavaScript

function copyToClipBoard() {
  // var text_to_share = "hello world";
  document.querySelector('#encpText').select();
  document.execCommand('copy');
}

$scope.encryptMD5Get = function() {
  var token = 'test Key';

  guidelineEditFactory.getEncryptionKey(token).then(function(response) {
    var EncString = response;
    $scope.token = EncString;

    setTimeout(function() {
      copyToClipBoard();
    }, 1000);

  });
}

在此代码中，我没有在 (ctrl+v) 中获取副本 在 (ctrl+v) 旧复制代码中，由 (ctrl+c) 复制p>

但是当我尝试在 Chrome 控制台上执行此操作时，它会起作用 那么我哪里做错了

Answer 1

使用ngclipboard

设置

首先，将 angularjs 和 Clipboard.js 包含到您的文档中。

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

然后包含 ngclipboard.js。

    <script src="dist/ngclipboard.min.js"></script>

将 ngclipboard 依赖项添加到您的模块

    var myApp = angular.module('app', ['ngclipboard']);

最后，将 ngclipboarddirective 添加到所需的 html 元素中。

    <button class="btn" ngclipboard data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard

就您而言

<div class="span3" ng-if="ec.name==='AccessTokenKey'">
    <input class="mTop10 span9" type="text" ng-model="token" id="encpText"/>
    <input class=”hide-input” id="id" value={{token}}>
<button class="btn btn-alt btn-small link-btn" ng-click="encryptMD5Get()" title="Copy to clip board" ngclipboard data-clipboard-target="#id">Copy Clipboard</button>