文档 execCommand 副本不适用于 AJAX

Question

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

• fiddle link with AJAX

• fiddle link without 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

我遇到了同样的问题。我相当原始地解决了它：在单击事件的处理程序中，您可以运行一个间隔，该间隔将检查服务器响应后 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 变量的值来启动间隔。

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

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

更新 01.07.19

为了在 iOS 上正确复制到剪贴板，请将属性 contenteditable 与值true 添加到文本字段：

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