Trello ve basın kartı üzerine geldiğinizdeCtrlCbu kart URL panoya kopyalar. Bunu nasıl yapıyorlar?

Söyleyebileceğim kadarıyla, Flash film yer yok. Flashblock yüklü var ve Firefox ağ sekmede Flash film yüklü gösterir. (Her zamanki yöntemi, örneğin, ZeroClipboard.)

Bu büyü nasıl elde ediyorlar?

(Hemen şu anda bence tezahür etti: metin seç sayfasında, yani sanırım onlar görünmez bir eleman, burada oluşturdukları bir metin seçimi ile JavaScript koduCtrlCtarayıcının varsayılan davranış, görünmez düğüm text değerini kopyalama tetikler.)

Açıklama:I wrote the code that Trello uses; aşağıdaki kod, kod Trello pano hile yapmak için kullandığı asıl kaynaktır.

Aslında "kullanıcı clipboard" tuşuna basın, bunun yerine kullanıcı bir şeyler seçerek biraz yardımcı yararlı . erişim değiliz ^kbd>CtrlC.

Sesleri çözdüğün gibi; ne zaman vurmak istiyorum aslında faydalanıyoruzCtrlC, çarpmak zorundaCtrlilk anahtar. O zamanCtrltuşu, panoya sonunda, ve içindeki tüm metni seçmek istediğiniz metni içeren bir metin alanının içinde pop, seçimi ne zaman tüm ayarlanırCtuşuna basınız. (O zaman biz ne zaman button gizleCtrlanahtar gelir)

Özellikle, Trello bunu yapar:

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 var

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

Pano şeyler için 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;
}

... ve CSS aslında button göremiyorum çok zaman açılır ... ama "görünür" kopyalamak yeterli.

Bir kart üzerine geldiğinizde, çağırır

TrelloClipboard.set(cardUrl)

... o zaman pano Yardımcısı seçin bilir ne zamanCtrltuşa basıldığında.