Làm thế nào để Trello truy cập vào clipboard của người dùng?

Khi bạn di chuột qua thẻ trong Trello và nhấn Ctrl+ C, URL của thẻ này sẽ được sao chép vào bảng tạm. Làm thế nào để họ làm điều này?

Theo như tôi có thể nói, không có phim Flash nào liên quan. Tôi đã cài đặt Flashblock và tab mạng Firefox hiển thị không tải phim Flash. (Đó là phương pháp thông thường, ví dụ, bằng ZeroClipboard.)

Làm thế nào để họ đạt được điều kỳ diệu này?

(Ngay tại thời điểm này tôi nghĩ rằng tôi đã có một sự hiển linh: Bạn không thể chọn văn bản trên trang, vì vậy tôi cho rằng họ có một yếu tố vô hình, nơi mà họ tạo ra một lựa chọn văn bản thông qua mã JavaScript, và Ctrl+ Ctrigger hành vi mặc định của trình duyệt, sao chép mà vô hình giá trị văn bản của nút.)

Tiết lộ: Tôi đã viết mã mà Trello sử dụng ; mã dưới đây là mã nguồn thực tế mà Trello sử dụng để thực hiện thủ thuật clipboard.

Chúng tôi thực sự không "truy cập vào bảng tạm của người dùng", thay vào đó chúng tôi giúp người dùng thoát ra một chút bằng cách chọn thứ gì đó hữu ích khi họ nhấn Ctrl+ C.

Âm thanh như bạn đã tìm ra nó; chúng tôi tận dụng thực tế là khi bạn muốn nhấn Ctrl+ C, bạn phải nhấn Ctrlphím trước. Khi Ctrlnhấn phím, chúng tôi bật trong một vùng văn bản có chứa văn bản mà chúng tôi muốn kết thúc trên bảng tạm và chọn tất cả văn bản trong đó, vì vậy tất cả các lựa chọn được đặt khi Cnhấn phím. (Sau đó, chúng tôi ẩn textarea khi Ctrlkhóa xuất hiện)

Cụ thể, Trello thực hiện điều này:

TrelloClipboard = new class
  constructor: ->
    @value = ""

    $(document).keydown (e) =>
      # Only do this if there's something to be put on the clipboard, and it
      # looks like they're starting a copy shortcut
      if !@value || !(e.ctrlKey || e.metaKey)
        return

      if $(e.target).is("input:visible,textarea:visible")
        return

      # Abort if it looks like they've selected some text (maybe they're trying
      # to copy out a bit of the description or something)
      if window.getSelection?()?.toString()
        return

      if document.selection?.createRange().text
        return

      _.defer =>
        $clipboardContainer = $("#clipboard-container")
        $clipboardContainer.empty().show()
        $("<textarea id='clipboard'></textarea>")
        .val(@value)
        .appendTo($clipboardContainer)
        .focus()
        .select()

    $(document).keyup (e) ->
      if $(e.target).is("#clipboard")
        $("#clipboard-container").empty().hide()

  set: (@value) ->

Trong DOM chúng tôi đã có

<div id="clipboard-container"><textarea id="clipboard"></textarea></div>

CSS cho nội dung clipboard:

#clipboard-container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  z-index: 100;
  display: none;
  opacity: 0;
}
#clipboard {
  width: 1px;
  height: 1px;       
  padding: 0px;
}

... và CSS làm cho nó để bạn thực sự không thể nhìn thấy vùng văn bản khi nó xuất hiện ... nhưng nó "hiển thị" đủ để sao chép từ đó.

Khi bạn di chuột qua thẻ, nó gọi

TrelloClipboard.set(cardUrl)

... Vì vậy, sau đó trình trợ giúp clipboard biết những gì cần chọn khi Ctrlnhấn phím.

Tôi thực sự đã xây dựng một tiện ích mở rộng Chrome thực hiện chính xác điều này và cho tất cả các trang web. Mã nguồn là trên GitHub .

Tôi tìm thấy ba lỗi với cách tiếp cận của Trello, mà tôi biết vì tôi đã tự mình đối mặt với chúng :)

Bản sao không hoạt động trong các tình huống sau:

1. Nếu bạn đã Ctrlnhấn và sau đó di chuột một liên kết và nhấn C, bản sao không hoạt động.
2. Nếu con trỏ của bạn ở trong một số trường văn bản khác trong trang, bản sao sẽ không hoạt động.
3. Nếu con trỏ của bạn nằm trong thanh địa chỉ, bản sao không hoạt động.

Tôi đã giải quyết # 1 bằng cách luôn có một khoảng ẩn, thay vì tạo một khoảng khi người dùng nhấn Ctrl/ Cmd.

Tôi đã giải quyết # 2 bằng cách tạm thời xóa lựa chọn có độ dài bằng không, lưu vị trí dấu mũ, thực hiện sao chép và khôi phục vị trí dấu mũ.

Tôi chưa tìm thấy bản sửa lỗi nào cho số 3 :) (Để biết thông tin, hãy kiểm tra vấn đề mở trong dự án GitHub của tôi).

Với sự trợ giúp của mã áo mưa ( liên kết đến GitHub ), tôi đã quản lý để có được một phiên bản đang chạy truy cập vào bảng tạm với JavaScript đơn giản.

function TrelloClipboard() {
    var me = this;

    var utils = {
        nodeName: function (node, name) {
            return !!(node.nodeName.toLowerCase() === name)
        }
    }
    var textareaId = 'simulate-trello-clipboard',
        containerId = textareaId + '-container',
        container, textarea

    var createTextarea = function () {
        container = document.querySelector('#' + containerId)
        if (!container) {
            container = document.createElement('div')
            container.id = containerId
            container.setAttribute('style', [, 'position: fixed;', 'left: 0px;', 'top: 0px;', 'width: 0px;', 'height: 0px;', 'z-index: 100;', 'opacity: 0;'].join(''))
            document.body.appendChild(container)
        }
        container.style.display = 'block'
        textarea = document.createElement('textarea')
        textarea.setAttribute('style', [, 'width: 1px;', 'height: 1px;', 'padding: 0px;'].join(''))
        textarea.id = textareaId
        container.innerHTML = ''
        container.appendChild(textarea)

        textarea.appendChild(document.createTextNode(me.value))
        textarea.focus()
        textarea.select()
    }

    var keyDownMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (!(e.ctrlKey || e.metaKey)) {
            return
        }
        var target = e.target
        if (utils.nodeName(target, 'textarea') || utils.nodeName(target, 'input')) {
            return
        }
        if (window.getSelection && window.getSelection() && window.getSelection().toString()) {
            return
        }
        if (document.selection && document.selection.createRange().text) {
            return
        }
        setTimeout(createTextarea, 0)
    }

    var keyUpMonitor = function (e) {
        var code = e.keyCode || e.which;
        if (e.target.id !== textareaId || code !== 67) {
            return
        }
        container.style.display = 'none'
    }

    document.addEventListener('keydown', keyDownMonitor)
    document.addEventListener('keyup', keyUpMonitor)
}

TrelloClipboard.prototype.setValue = function (value) {
    this.value = value;
}

var clip = new TrelloClipboard();
clip.setValue("test");

Vấn đề duy nhất là, phiên bản này chỉ hoạt động với Chrome. Nền tảng Trello hỗ trợ tất cả các trình duyệt. Tôi đang thiếu gì?

Cảm ơn rất nhiều nhờ có VadimIvanov.

Xem một ví dụ hoạt động: http://jsfiddle.net/AGEf7/

Mã của Daniel LeCheminant không hoạt động với tôi sau khi chuyển đổi nó từ CoffeeScript sang JavaScript ( js2coffee ). Nó tiếp tục ném bom trên _.defer()đường dây.

Tôi giả định rằng đây là một cái gì đó để làm với việc trì hoãn jQuery, vì vậy tôi đã thay đổi nó $.Deferred()và nó đang hoạt động. Tôi đã thử nghiệm nó trong Internet Explorer 11, Firefox 35 và Chrome 39 với jQuery 2.1.1. Cách sử dụng giống như được mô tả trong bài viết của Daniel.

var TrelloClipboard;

TrelloClipboard = new ((function () {
    function _Class() {
        this.value = "";
        $(document).keydown((function (_this) {
            return function (e) {
                var _ref, _ref1;
                if (!_this.value || !(e.ctrlKey || e.metaKey)) {
                    return;
                }
                if ($(e.target).is("input:visible,textarea:visible")) {
                    return;
                }
                if (typeof window.getSelection === "function" ? (_ref = window.getSelection()) != null ? _ref.toString() : void 0 : void 0) {
                    return;
                }
                if ((_ref1 = document.selection) != null ? _ref1.createRange().text : void 0) {
                    return;
                }
                return $.Deferred(function () {
                    var $clipboardContainer;
                    $clipboardContainer = $("#clipboard-container");
                    $clipboardContainer.empty().show();
                    return $("<textarea id='clipboard'></textarea>").val(_this.value).appendTo($clipboardContainer).focus().select();
                });
            };
        })(this));

        $(document).keyup(function (e) {
            if ($(e.target).is("#clipboard")) {
                return $("#clipboard-container").empty().hide();
            }
        });
    }

    _Class.prototype.set = function (value) {
        this.value = value;
    };

    return _Class;

})());

Một cái gì đó rất giống nhau có thể được nhìn thấy trên http://goo.gl khi bạn rút ngắn URL.

Có một yếu tố đầu vào chỉ đọc được tập trung theo chương trình, với nhấn công cụ CTRL-Cđể sao chép.

Khi bạn nhấn phím tắt đó, nội dung đầu vào sẽ được đưa vào bảng tạm. Thực sự tốt đẹp :)