文档execCommand副本不能与AJAX一起使用 [英] document execCommand copy not working with AJAX

问题描述

我无法直接复制生成的链接（没有ctrl + C）
我是usign document.execCommand（'copy'）但似乎它没有效果。
如果代码没有AJAX那么它的工作完全。
这是

I can't copy the generated link directly (without ctrl+C) I am usign document.execCommand('copy') but it seems it has no effect. If code has no AJAX then its working pefectly. Here's the

• 与AJAX的小提琴

没有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: "48ecf90304d70f30729abe82dfea1dd8a11c4584",
                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
            });
          });

更新：

如何使用JavaScript复制到剪贴板？

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

is not answer to my question as My code also copies without using ctrl+C if AJAX is not there. However when I am using AJAX document.execCommand('copy') is not working.

推荐答案

W3规格：

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

Copy and cut commands triggered through a scripting API will only affect the contents of the real clipboard if the event is dispatched from an event that is trusted and triggered by the user, or if the implementation is configured to allow this.

但是，我曾说过，当用户进行一些互动时，我们可以通过复制文本来欺骗浏览器。

But, having said that we can try to fool around the browser by copying text when a user does some interaction.

在这种情况下，因为您正在寻找点击事件，我假设您的用户正在与鼠标进行交互

In this case since you are looking for a click event I assume you're user is interacting with mouse

那么，如果我附上一个 $（窗口）.blur（）或 $ （文件）.click（） ajax调用解决后的事件？

So, what if I attach a $(window).blur() or $(document).click() event after the ajax call is resolved?

这是对的，因为，用户必须模糊在某些时候使用副本选择，用户将启动模糊（）或点击（）（根据您的需要） 我们可以将文本复制到剪贴板。

That's right, Since, the user has to blur at some point to use the copy selection, user will initiate a blur() or click() (depending on your need) and we can copy text to our clipboard.

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

PS：这已在chrome中测试过。

P.S: This has been tested in chrome.

这篇关于文档execCommand副本不能与AJAX一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！