Trello เข้าถึงคลิปบอร์ดของผู้ใช้ได้อย่างไร

เมื่อคุณโฮเวอร์เหนือการ์ดในTrelloและกดCtrl+ CURL ของการ์ดนี้จะถูกคัดลอกไปยังคลิปบอร์ด พวกเขาทำเช่นนี้ได้อย่างไร

เท่าที่ฉันสามารถบอกได้ว่าไม่มีภาพยนตร์ Flash เกี่ยวข้อง ฉันติดตั้งFlashblockแล้วและแท็บเครือข่าย Firefox ไม่แสดงภาพยนตร์ Flash ที่โหลด (นั่นเป็นวิธีปกติเช่นโดย ZeroClipboard)

พวกเขาบรรลุความมหัศจรรย์นี้ได้อย่างไร?

(ในขณะนี้ฉันคิดว่าฉันมี epiphany: คุณไม่สามารถเลือกข้อความบนหน้าดังนั้นฉันคิดว่าพวกเขามีองค์ประกอบที่มองไม่เห็นที่พวกเขาสร้างการเลือกข้อความผ่านรหัส JavaScript และCtrl+ Cเรียกพฤติกรรมเริ่มต้นของเบราว์เซอร์คัดลอกที่มองไม่เห็น ค่าข้อความของโหนด)

การเปิดเผยข้อมูล: ผมเขียนโค้ดที่ใช้ Trello ; โค้ดด้านล่างนี้เป็นรหัสแหล่งที่มาจริงของ Trello ที่ใช้เพื่อให้บรรลุเคล็ดลับคลิปบอร์ด

เราไม่ได้จริง "การเข้าถึงคลิปบอร์ดของผู้ใช้" แทนเราช่วยให้ผู้ใช้ออกบิตโดยการเลือกสิ่งที่มีประโยชน์เมื่อพวกเขากด+CtrlC

ดูเหมือนคุณจะคิดออก เราใช้ประโยชน์จากข้อเท็จจริงที่ว่าเมื่อคุณต้องการกดCtrl+ Cคุณต้องกดCtrlปุ่มแรก เมื่อCtrlกดปุ่มเราปรากฏใน textarea ที่มีข้อความที่เราต้องการที่จะจบลงบนคลิปบอร์ดและเลือกข้อความทั้งหมดในนั้นเพื่อเลือกจะถูกตั้งค่าเมื่อCกดปุ่ม (จากนั้นเราซ่อน textarea เมื่อ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 ทำให้คุณไม่สามารถมองเห็น textarea ได้จริงเมื่อมันปรากฏขึ้นใน ... แต่มัน "มองเห็นได้" พอที่จะคัดลอกได้

เมื่อคุณวางเมาส์เหนือการ์ดจะมีการโทร

TrelloClipboard.set(cardUrl)

... ดังนั้นผู้ช่วยคลิปบอร์ดก็รู้ว่าต้องเลือกอะไรเมื่อCtrlกดปุ่ม

จริง ๆ แล้วฉันสร้างส่วนขยายของ Chromeที่ทำสิ่งนี้และสำหรับหน้าเว็บทั้งหมด รหัสที่มาเป็นบน GitHub

ฉันพบข้อบกพร่องสามข้อด้วยวิธีของ Trello ซึ่งฉันรู้เพราะฉันเผชิญกับตัวเอง :)

สำเนาไม่ทำงานในสถานการณ์เหล่านี้:

1. หากคุณCtrlกดแล้วจึงวางลิงก์และ Hit Cการคัดลอกจะไม่ทำงาน
2. หากเคอร์เซอร์ของคุณอยู่ในช่องข้อความอื่น ๆ ในหน้าสำเนาจะไม่ทำงาน
3. หากเคอร์เซอร์ของคุณอยู่ในแถบที่อยู่สำเนาจะไม่ทำงาน

ฉันจะแก้ไข # 1 โดยมักจะมีช่วงที่ซ่อนอยู่มากกว่าการสร้างหนึ่งเมื่อความนิยมของผู้ใช้/CtrlCmd

ฉันแก้ไข # 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");

ปัญหาเดียวคือว่ารุ่นนี้ใช้งานได้กับ Chrome เท่านั้น แพลตฟอร์ม Trello รองรับเบราว์เซอร์ทั้งหมด ฉันกำลังคิดถึงอะไร

ขอบคุณโซเวียตกับ VadimIvanov

ดูตัวอย่างการทำงาน: http://jsfiddle.net/AGEf7/

รหัสของ Daniel LeCheminant ใช้ไม่ได้หลังจากแปลงจาก CoffeeScript เป็น JavaScript ( js2coffee ) มันยังคงทิ้งระเบิดใน_.defer()สาย

ฉันคิดว่านี่เป็นสิ่งที่เกี่ยวข้องกับ jQuery ที่เลื่อนเวลาออกไปดังนั้นฉันจึงเปลี่ยนเป็น$.Deferred()และมันใช้งานได้แล้ว ฉันทดสอบใน Internet Explorer 11, Firefox 35 และ Chrome 39 ด้วย jQuery 2.1.1 การใช้งานเหมือนกับที่อธิบายไว้ในโพสต์ของ 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;

})());

สิ่งที่คล้ายกันมากสามารถดูได้ที่http://goo.glเมื่อคุณย่อ URL

มีองค์ประกอบอินพุตแบบอ่านอย่างเดียวที่ให้ความสำคัญกับการเขียนโปรแกรมพร้อมด้วยคำแนะนำเครื่องมือกดCTRL-Cเพื่อคัดลอก

เมื่อคุณกดปุ่มลัดนั้นเนื้อหาอินพุตจะเข้าสู่คลิปบอร์ดได้อย่างมีประสิทธิภาพ ดีจริงๆ :)