Copy to clipboard | XM Community
Solved

Copy to clipboard

  • 24 July 2018
  • 5 replies
  • 205 views

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?
icon

Best answer by mattyb513 25 July 2018, 04:56

View original

5 replies

Userlevel 5
Badge +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.
Userlevel 6
Badge +6
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
The java script along with the HTML code worked out great. Thank you.
Userlevel 3
Badge +11

This 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