Solved
Copy to clipboard
I have a survey that generates a phrase towards the end based from the answers of the survey. I want to be able to copy that phrase to the clipboard to be pasted in another program. Is this possible?
Best answer by mattyb513
This will work. It seems like overkill to me but it's already written out and straight from StackOverflow. You can put this right in your JavaScript editor.
```javascript
Qualtrics.SurveyEngine.addOnload(function() {
jQuery('#CopyButton').click(function() {
var copyText = document.getElementById("Phrase");
copyToClipboard(copyText);
});
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;
}
});
```
Make sure you have something like this in your HTML:
```html
<span id="Phrase">Here is a phrase</span>
<button id="CopyButton">Copy to Clipboard</button>
```
It will copy whatever is within that Phrase `span`.
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_0Am8zYfXK6gqQa9?Q_SurveyVersionID=current&Q_CHL=preview
StackOverflow Question: https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery
View original
+10@cccalalo were you looking to have this done automatically? Does it work if you select it and then copy it?
Yes, I was looking for a way to have it copied automatically. The user can highlight and copy the generated phrase, but I was trying to see if it could be done with just a press/click of a button.
+6This will work. It seems like overkill to me but it's already written out and straight from StackOverflow. You can put this right in your JavaScript editor.
```javascript
Qualtrics.SurveyEngine.addOnload(function() {
jQuery('#CopyButton').click(function() {
var copyText = document.getElementById("Phrase");
copyToClipboard(copyText);
});
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;
}
});
```
Make sure you have something like this in your HTML:
```html
<span id="Phrase">Here is a phrase</span>
<button id="CopyButton">Copy to Clipboard</button>
```
It will copy whatever is within that Phrase `span`.
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_0Am8zYfXK6gqQa9?Q_SurveyVersionID=current&Q_CHL=preview
StackOverflow Question: https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery
+11This worked great, but how can I preserve formatting? I'm not too great with javascript but was trying to add some version of '.val().trim().replace(/\\n/g, "
");' with no luck. Any suggestions.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.