Как Trello получает доступ к буферу обмена пользователя?

Раскрытие информации: я написал код, который использует Trello; приведенный ниже код является фактическим исходным кодом, который Trello использует для выполнения трюка с буфером обмена.

На самом деле мы не получаем доступ к буферу обмена пользователя, вместо этого мы немного помогаем пользователю, выбирая что-то полезное, когда он нажимает Ctrl + C.

Похоже, вы уже догадались; мы пользуемся тем фактом, что когда вы хотите нажать Ctrl + C, вы должны сначала нажать клавишу Ctrl. Когда нажата клавиша Ctrl, мы вставляем текстовое поле, содержащее текст, который мы хотим поместить в буфер обмена, и выделяем весь текст в нем, поэтому выделение устанавливается, когда Нажата клавиша C. (Затем мы скрываем текстовое поле, когда появляется клавиша Ctrl.)

В частности, Trello делает это:

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) ->

В DOM у нас есть:

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

CSS для буфера обмена:

#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;
}

... и CSS делает так, что вы фактически не можете видеть текстовое поле, когда оно появляется ... но его достаточно для копирования.

Когда вы наводите курсор на карту, она вызывает

TrelloClipboard.set(cardUrl)

... так что тогда помощник буфера обмена знает, что выбрать при нажатии клавиши Ctrl.

Я действительно создал расширение Chrome, которое делает именно это, и для все веб-страницы. Исходный код находится на GitHub.

Я обнаружил три ошибки в подходе Trello, которые я знаю, потому что сам сталкивался с ними :)

Копия не работает в следующих сценариях:

1. Если вы уже нажали Ctrl, а затем наведите указатель мыши на ссылку и нажмите C, копия не сработает.
2. Если ваш курсор находится в другом текстовом поле на странице, копия не работает.
3. Если ваш курсор находится в адресной строке, копия не работает.

Я решил №1, всегда имея скрытый диапазон, а не создавая его, когда пользователь нажимает Ctrl / Cmd.

Я решил №2, временно очистив выделение нулевой длины, сохранив положение каретки, сделав копию и восстановив положение каретки.

Я еще не нашел исправления для №3 :) (Для получения информации проверьте открытую проблему в моем проекте GitHub).

С помощью кода плаща на GitHub мне удалось получить работающую версию с доступом к буферу обмена с помощью простой JavaScript.

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");

См. Рабочий пример: http://jsfiddle.net/AGEf7/

Код Дэниела ЛеЧеминанта не работал у меня после преобразование его из CoffeeScript в JavaScript (js2coffee). Он продолжал бомбить линию _.defer().

Я предположил, что это как-то связано с отложенными действиями jQuery, поэтому я изменил его на $.Deferred(), и теперь он работает. Я тестировал его в Internet Explorer 11, Firefox 35 и Chrome 39 с jQuery 2.1.1. Использование такое же, как описано в сообщении Даниэля.

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;

})());

Что-то очень похожее можно увидеть на http://goo.gl, если сократить URL-адрес.

Существует элемент ввода только для чтения, который получает программную фокусировку, с всплывающей подсказкой, нажимающей CTRL-C для копирования.

Когда вы нажимаете этот ярлык, входное содержимое эффективно попадает в буфер обмена. Действительно мило :)