Question

我不能直接复制生成的链接（没有ctrl + C）我是document.execCommand('copy')但它似乎没有效果。 如果代码没有AJAX，那么它的工作正常。

HTML ：

<div class="permalink-control"> </div>

JQUERY ：

    $(".permalink-control")
          .append(
            '<div class="input-group">' +
            '    <span class="input-group-btn"><button type="button" class="btn btn-default" title="Get Permalink"><span class="glyphicon glyphicon-link"></span></button></span>' +
            '    <input type="text" class="form-control">' +
            '</div>'
          );
        $(".permalink-control input")
          .hide()
          .focus(function () {
            // Workaround for broken selection: https://stackoverflow.com/questions/5797539
            var $this = $(this);
            $this.select()
              .mouseup(function () {
                $this.unbind("mouseup");
                return false;
              });
          });
        $(".permalink-control button")
          .click(function () {
            var $this = $(this);
            $.ajax({
              url: "https://api-ssl.bitly.com/shorten",
              dataType: "jsonp",
              data: {
                longUrl: window.location.href,
                access_token: "your access token",
                format: "json"
              },
              success: function (response) {
                var longUrl = Object.keys(response.results)[0];
                var shortUrl = response.results[longUrl].shortUrl;
                if (shortUrl.indexOf(":") === 4) {
                  shortUrl = "https" + shortUrl.substring(4);
                }
                $this.parents(".permalink-control")
                  .find("input")
                  .show()
                  .val(shortUrl)
                  .focus();
              },
              async:false
            });
          });

更新

How do I copy to the clipboard in JavaScript?

不回答我的问题，因为如果没有AJAX，我的代码也会在不使用ctrl + C的情况下进行复制。但是，当我使用AJAX时，document.execCommand('copy')无效。

Answer 1

W3 specs中明确说明了这一点：

通过脚本API触发的复制和剪切命令只会影响真实剪贴板的内容，前提是从用户信任和触发的事件调度事件，或者实现配置为允许此事件。

但是，说过我们可以通过复制文本when a user does some interaction来欺骗浏览器。

在这种情况下，由于您正在寻找click事件，我假设您是用户正在与mouse进行互动

那么，如果我在解析ajax调用后附加$(window).blur()或$(document).click()事件会怎样？

这是正确的，因为用户必须blur在某个时候使用副本选择，用户将启动blur() or click() (depending on your need)，我们可以将文本复制到剪贴板。

这是HACKY DEMO

$(document).ready(function(){
    var shortUrl;
    $(".permalink-control")
      .append(
        '<div class="input-group">' +
        '    <span class="input-group-btn"><button type="button" class="btn btn-default" title="Get Permalink"><span class="glyphicon glyphicon-link"></span></button></span>' +
        '    <input type="text" class="form-control">' +
        '</div>'
      );
     $(".permalink-control input")
      .hide()
      .focus(function () {
        // Workaround for broken selection: http://stackoverflow.com/questions/5797539
        var $this = $(this);
        $this.select();
        document.execCommand('copy');
          $this.mouseup(function () {
            $this.unbind("mouseup");
            return false;
          });
      });
    $(".permalink-control button")
      .click(function () {
        var shortUrl ="";
        var $this = $(this);
        $.ajax({
          url: "https://api-ssl.bitly.com/shorten",
          dataType: "jsonp",
          data: {
            longUrl: window.location.href,
            access_token: "48ecf90304d70f30729abe82dfea1dd8a11c4584",
            format: "json"
          },
          success: function (response) {
             var longUrl = Object.keys(response.results)[0];
            shortUrl = response.results[longUrl].shortUrl;
            if (shortUrl.indexOf(":") === 4) {
              shortUrl = "https" + shortUrl.substring(4);
            }
              $this.parents(".permalink-control")
              .find("input")
              .show()
              .val(shortUrl)
              .focus();
            } 
       }).done(function(){
            $(window).blur(function(){
							document.execCommand('copy');
              $(window).off('blur');// make sure we don't copy anything else from the document when window is foucussed out
            });
       })
    });
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="permalink-control"></div> 
<div class"log"></div>

P.S：已在Chrome中测试过。

Answer 2

我有同样的问题。我相当原始地解决了它：在click事件的处理程序内，您可以运行一个间隔，该间隔将检查服务器响应后ajax将在其中插入值的变量。收到答案后，我们停止间隔并开始使用剪贴板。没问题，因为用户自己可以在点击后开始间隔，而没有任何回调。

简单的 jQuery 示例：

var ajaxResponse;

function copyText(copiedText){
  $('<textarea class="copied-text">' + copiedText + '</textarea>').appendTo('body');

  if ( navigator.userAgent.match(/ipad|iphone/i) ) {
    var range = document.createRange(),
        textArea = $('.copied-text')[0];
    range.selectNodeContents(textArea);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    textArea.setSelectionRange(0, 999999);
  } else {
    $('.copied-text').select();
  }

  document.execCommand('copy');
  $('.copied-text').remove();
};

function myAjaxFunc(){
  $.ajax({
    type: 'POST',
    url: yourUrl,
    data: yourData,
    success: function(data){
      ajaxResponse = data;
    }
  });
};

$('.your-button').on('click', function(){
  myAjaxFunc();
  var ajaxCheckTimer = setInterval(function(){
    if ( ajaxResponse ) {
      copyText(ajaxResponse);
      clearInterval(ajaxCheckTimer);
    };
  }, 100);
});

在此示例中，单击按钮时，我们将一些数据发送到服务器，并通过检查ajaxResponse变量的值来开始间隔。

在接收到服务器的响应之后，服务器的响应将写入此变量，此后间隔中的条件变为true，并调用文本复制功能，并将服务器响应变量指定为参数：copyText(ajaxResponse);。间隔停止。

copyText函数在页面上使用ajaxResponse变量的值创建文本区域，将该值从字段复制到剪贴板，然后从页面中删除该字段。

文档execCommand副本不能与AJAX一起使用

2 个答案: