Funkcja wyboru niestandardowego z kopią do schowka czystego JS

Question

Aktualny kod dołącza przycisk, aby szybko wybrać kod w znaczniku <pre>. Dodam tylko, że mogę skopiować tę zawartość do schowka i zmienić tekst przycisku na "skopiowany".

Jak mogę to osiągnąć, modyfikując obecny działający kod poniżej? Nie miałbym nic przeciwko korzystaniu ze schowka.js, bitów jQuery lub tylko natywnego wsparcia JS, ponieważ zostało wprowadzone od wersji Chrome 43. Po prostu nie wiem, jak to zrobić, dodając to, czego potrzebuję.

function selectPre(e) { 
    if (window.getSelection) { 
     var s = window.getSelection(); 
     if (s.setBaseAndExtent) { 
      s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); 
     } 
     else { 
      var r = document.createRange(); 
      r.setStart(e.firstChild, 0); 
      r.setEnd(e.lastChild, e.lastChild.textContent.length); 
      s.removeAllRanges(); 
      s.addRange(r); 
     } 
    } 
    else if (document.getSelection) { 
     var s = document.getSelection(); 
     var r = document.createRange(); 
     r.selectNodeContents(e); 
     s.removeAllRanges(); 
     s.addRange(r); 
    } 
    else if (document.selection) { 
     var r = document.body.createTextRange(); 
     r.moveToElementText(e); 
     r.select(); 
    } 
} 
var diff = document.getElementById('diff_table').getElementsByTagName('tr'); 
var difflen = diff.length; 
for(i=0; i<difflen; i++) { 
    var newdiff = diff[i].childNodes[1]; 
    if (newdiff.className && (newdiff.className == 'added' || newdiff.className == 'modified')) { 
     newdiff.className += ' diff-select'; 
     newdiff.innerHTML = '<div class="btnbox"><button class="btn btn-default btn-xs" onclick="selectPre(this.parentNode.nextSibling)">Select</button></div>' + newdiff.innerHTML; 
    } 
} 

Answer 1

Z jakiegoś powodu rzeczywiście czynność selectPre nie zostanie znaleziony podczas odtwarzania sprawę na jsfiddle. Jsfiddle może pozbyć się tego, co według niego jest martwym kodem lub zmienić jego nazwę ze względu na zminimalizowanie.

Ale jeśli to, co robi, wybierając zawartość tagu <pre>, biblioteka clipboard.js (która jest gotowa do użycia) może zrobić to już samodzielnie.

Tak więc kończy się wymaganiem poprawnej konfiguracji obiektu Clipboard. Korzystanie że jeden:

new Clipboard('.btn', { 
    // The targeting to the correct content is done here. 
    target: function(trigger) { 
     return trigger.parentNode.nextSibling; 
    } 
    // clipboard.js will take the entire inner content of the <pre>, 
    // I think this is what you are trying to do in your "selectPre" 
    // function, but I am not sure. 
}); 

naśladuje swoją selectPre(this.parentNode.nextSibling) które nie są już potrzebne, aby dołączyć do atrybutu swojej przycisku onclick.

Demo: http://jsfiddle.net/5k60nm1y/

Zauważ, że miałem się domyślić, co się struktura tabeli jest. Może różnić się od rzeczywistej tabeli, więc może być konieczne dostosowanie sposobu przypisywania numeru newdiff do właściwej komórki.

Jeśli potrzebujesz czegoś bardziej skomplikowanego niż wewnętrzna treść znacznika <pre>, możesz dostosować zachowanie obiektu Clipboard, przekazując niestandardową funkcję do właściwości text konstruktora schowka, zamiast używać Właściwość target. Sprawdź stronę główną schowka, to całkiem zrozumiałe.

Jak wspomniał Zac, ułatwiłbyś ludziom zadanie (a prawdopodobnie otrzymalibyśmy rozwiązanie znacznie szybciej), gdybyś mógł udostępnić swój tabel HTML. Nie musiałbym zgadywać i tworzyć fałszywego. Ponadto kod, który dostarczyłbym ci, byłby bezpośrednio stosowany do twojej prawdziwej tabeli, podczas gdy teraz może wciąż wymagać dostosowania. Mam nadzieję, że odgadłem to wystarczająco dobrze, a mój stół jest blisko twojego.

Answer 2

Zastosowałem kod do tego kodu, How do I copy to the clipboard in JavaScript?, do kodu, aby łatwo zobaczyć, jak można to zrobić.

Zmodyfikowałem również Twój onclick="selectPre(...)" na ten onclick="selectPre(this)" i dodałem kilka zmiennych w funkcji "selectPre".

Tutaj również Fiddle demo

function selectPre(b) { 
    var s;        // added - selection variable 
    var e = b.parentNode.nextSibling; // added - parent sibling element 
    if (window.getSelection) { 
     var s = window.getSelection(); 
     if (s.setBaseAndExtent) { 
      s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); 
     } 
     else { 
      var r = document.createRange(); 
      r.setStart(e.firstChild, 0); 
      r.setEnd(e.lastChild, e.lastChild.textContent.length); 
      s.removeAllRanges(); 
      s.addRange(r); 
     } 
    } 
    else if (document.getSelection) { 
     var s = document.getSelection(); 
     var r = document.createRange(); 
     r.selectNodeContents(e); 
     s.removeAllRanges(); 
     s.addRange(r); 
    } 
    else if (document.selection) { 
     var s = document.body.createTextRange(); 
     s.moveToElementText(e); 
     s.select(); 
    } 

    // added - copy and change button text 
    if (s) { 
     try { 
      var successful = document.execCommand('copy'); 
      // var msg = successful ? 'successful' : 'unsuccessful'; 
      // console.log('Copying text command was ' + msg); 
      if (successful) { 
       b.innerHTML = "Copied"; 
      } 
     } catch (err) { 
      // console.log('Oops, unable to copy'); 
     } 
    } 
} 
var diff = document.getElementById('diff_table').getElementsByTagName('tr'); 
var difflen = diff.length; 
for(i=0; i<difflen; i++) { 
    var newdiff = diff[i].childNodes[1]; 
    if (newdiff.className && (newdiff.className == 'added' || newdiff.className == 'modified')) { 
     newdiff.className += ' diff-select'; 

     // altered - onclick handler 
     newdiff.innerHTML = '<div class="btnbox"><button class="btn btn-default btn-xs" onclick="selectPre(this)">Select</button></div>' + newdiff.innerHTML; 
    } 
}