2016-07-19 7 views
0

Ich möchte "Copy to Clipboard" -Schaltflächen erstellen, um an unserem Sharepoint zu arbeiten. Sie sollten an ein paar verschiedenen Orten platziert werden, und was ich kopieren muss, ist ein Text aus einem bestimmten Feld auf der Seite (zB eine Liste von E-Mails).In die Zwischenablage kopieren

Ich weiß, ich kann nur den Text auswählen und kopieren, aber wir tun es ziemlich oft, so dass eine Schaltfläche, die automatisch den Text in die Zwischenablage kopiert, sehr nützlich wäre.

Ich habe es geschafft, eine in einem Skript-Editor zu erstellen, wo ich den ganzen Code unten eingefügt (die ich im Internet gefunden)

<!DOCTYPE html> 
<html> 
<head> 

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){ 
document.getElementById("copyButton").addEventListener("click", function() { 
    copyToClipboardMsg(document.getElementById("copyTarget"), "msg"); 
}); 

document.getElementById("copyButton2").addEventListener("click", function() { 
    copyToClipboardMsg(document.getElementById("copyTarget2"), "msg"); 
}); 

document.getElementById("pasteTarget").addEventListener("mousedown", function() { 
    this.value = ""; 
}); 


function copyToClipboardMsg(elem, msgElem) { 
     var succeed = copyToClipboard(elem); 
    var msg; 
    if (!succeed) { 
     msg = "Copy not supported or blocked. Press Ctrl+c to copy." 
    } else { 
     msg = "Text copied to the clipboard." 
    } 
    if (typeof msgElem === "string") { 
     msgElem = document.getElementById(msgElem); 
    } 
    msgElem.innerHTML = msg; 
    setTimeout(function() { 
     msgElem.innerHTML = ""; 
    }, 2000); 
} 

function copyToClipboard(elem) { 
     // create hidden text element, if it doesn't already exist 
    var targetId = "_hiddenCopyText_"; 
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; 
    var origSelectionStart, origSelectionEnd; 
    if (isInput) { 
     // can just use the original source element for the selection and copy 
     target = elem; 
     origSelectionStart = elem.selectionStart; 
     origSelectionEnd = elem.selectionEnd; 
    } else { 
     // must use a temporary form element for the selection and copy 
     target = document.getElementById(targetId); 
     if (!target) { 
      var target = document.createElement("textarea"); 
      target.style.position = "absolute"; 
      target.style.left = "-9999px"; 
      target.style.top = "0"; 
      target.id = targetId; 
      document.body.appendChild(target); 
     } 
     target.textContent = elem.textContent; 
    } 
    // select the content 
    var currentFocus = document.activeElement; 
    target.focus(); 
    target.setSelectionRange(0, target.value.length); 

    // copy the selection 
    var succeed; 
    try { 
      succeed = document.execCommand("copy"); 
    } catch(e) { 
     succeed = false; 
    } 
    // restore original focus 
    if (currentFocus && typeof currentFocus.focus === "function") { 
     currentFocus.focus(); 
    } 

    if (isInput) { 
     // restore prior selection 
     elem.setSelectionRange(origSelectionStart, origSelectionEnd); 
    } else { 
     // clear temporary content 
     target.textContent = ""; 
    } 
    return succeed; 
} 


}//]]> 

</script> 


</head> 

<body> 
    <input id="copyTarget" value="Some initial text"> <button id="copyButton">Copy</button><br><br> 
<span id="copyTarget2">Some Other Text</span> <button id="copyButton2">Copy</button><br><br> 
<input id="pasteTarget"> Click in this Field and hit Ctrl+V to see what is on clipboard<br><br> 
<span id="msg"></span><br> 



</body> 

</html> 

Aber wir haben Hauptprobleme mit sich: 1) es neu geladen die Seite jedes Mal, wenn wir auf die Schaltfläche "Kopieren" klicken 2) es ist nicht sehr elegant und freundlich, wenn wir über die Aktualisierung unserer Dokumente denken

Ich wäre sehr dankbar für Hinweise, die Sie für mich haben können, wie Lass es besser funktionieren.

Antwort

1

Dieses Projekt helfen: clipboardjs

+0

Hallo ich es gefunden habe, aber ich kann nicht herausfinden, wie es zu benutzen. Nehmen wir an, ich bin nicht wirklich gut mit Javascript und nur beginnen, die Sharepoint-Funktionen zu verstehen. Wenn Sie irgendwelche Richtlinien haben, wie man es benutzt, wäre ich dankbar – kjubus

+0

Bitte sehen Sie die Erklärung auf der Hauptseite. Hier ist der Code: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-input.html – xqoo0ooq

+0

Ok, das hat geholfen. Ich habe es geschafft, die Schaltflächen so zu gestalten, wie ich es möchte, aber sie aktualisieren meine Seite immer noch im Sharepoint. Gibt es eine Möglichkeit, das zu beseitigen? – kjubus