Copy to clipboard | XM Community
Skip to main content
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?
@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.
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.

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