Does anyone know why our Javascript code works only on the 2nd to nth try in SFDC, but on 1st attempt in stand-alone HTML?

We are creating "button" that executes Javascript to copy certain contents of a Case into the clipboard. The same result is seen under Chrome, IE, Safari, and Firefox.

The problem code we're attaching to the button is below.  Works 2nd to nth try:

{!REQUIRESCRIPT("/soap/ajax/38.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/38.0/apex.js")}

console.log('browser supports copy?: ' + document.queryCommandSupported("copy"));

var text = 'Ticket #: {!Case.Id}\n';

//window.prompt("Copy to clipboard: Ctrl+C, Enter", text);

var tempInput = document.createElement("textarea");
tempInput.setAttribute('id', 'copyid');
tempInput.value = text;
document.body.appendChild(tempInput);

i = document.getElementById('copyid');
i.select();

try {
    var result = document.execCommand("Copy");

    // clicking button this JS is embedded in first time results in a FALSE
    // clicking button this JS is embedded in second to nth time results in a TRUE
    console.log('execcommand copy result: ' + result);
}
catch (e) {
    console.log('Copy exception: ' + e);
}

And here is the same code in a standalone HTML which works 1st to nth click:

<script>

function doit() {

    console.log ('browser supports copy?: ' + document.queryCommandSupported("copy"));

    var text = 'blah blah';
    var tempInput = document.createElement("textarea");
    tempInput.setAttribute('id', 'copyid');
    tempInput.value = text;
    document.body.appendChild(tempInput);
    document.getElementById('copyid').select();

    try {
        var result = document.execCommand("copy", false, null);
        // clicking button this JS is embedded in first time results in a FALSE
        // clicking button this JS is embedded in second to nth time results in a TRUE
        console.log('execcommand copy result: ' + result);
    }
    catch (e) {
        console.log('Copy exception: ' + e);
    }

    document.body.removeChild(tempInput);

</script>

<input type="button" value="copy text" onClick="doit()">

 

Does anyone know why our Javascript code works only on the 2nd to nth try in SFDC, but on 1st attempt in stand-alone HTML?

We are creating "button" that executes Javascript to copy certain contents of a Case into the clipboard. The same result is seen under Chrome, IE, Safari, and Firefox.

The problem code we're attaching to the button is below.  Works 2nd to nth try:

{!REQUIRESCRIPT("/soap/ajax/38.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/38.0/apex.js")}

console.log('browser supports copy?: ' + document.queryCommandSupported("copy"));

var text = 'Ticket #: {!Case.Id}\n';

//window.prompt("Copy to clipboard: Ctrl+C, Enter", text);

var tempInput = document.createElement("textarea");
tempInput.setAttribute('id', 'copyid');
tempInput.value = text;
document.body.appendChild(tempInput);

i = document.getElementById('copyid');
i.select();

try {
    var result = document.execCommand("Copy");

    // clicking button this JS is embedded in first time results in a FALSE
    // clicking button this JS is embedded in second to nth time results in a TRUE
    console.log('execcommand copy result: ' + result);
}
catch (e) {
    console.log('Copy exception: ' + e);
}

And here is the same code in a standalone HTML which works 1st to nth click:

<script>

function doit() {

    console.log ('browser supports copy?: ' + document.queryCommandSupported("copy"));

    var text = 'blah blah';
    var tempInput = document.createElement("textarea");
    tempInput.setAttribute('id', 'copyid');
    tempInput.value = text;
    document.body.appendChild(tempInput);
    document.getElementById('copyid').select();

    try {
        var result = document.execCommand("copy", false, null);
        // clicking button this JS is embedded in first time results in a FALSE
        // clicking button this JS is embedded in second to nth time results in a TRUE
        console.log('execcommand copy result: ' + result);
    }
    catch (e) {
        console.log('Copy exception: ' + e);
    }

    document.body.removeChild(tempInput);

</script>

<input type="button" value="copy text" onClick="doit()">

 

Has anyone successfully created a "Copy to Clipboard" button in Visualforce?

 

I've got a method that works for Internet Explorer only ( http://www.htmlgoodies.com/beyond/javascript/article.php/3458851/Click-Its-Copied.htm) , which will be acceptable at this point, although I would prefer a cross-browser solution.

 

However, I don't seem to be able to make it work in a VF page. Here's my basic attempt:

 

 

<apex:page title="Clipboard Test" showheader="false">

	<script language="JavaScript">
		function ClipBoard()
		{
			holdtext.innerText = {!$Component.copytext}.innerText;
			Copied = holdtext.createTextRange();
			Copied.execCommand("Copy");
		}


	</script>

<body >
	<apex:outputpanel ID="copytext" >
		This text will be copied onto the clipboard when you click the button below.
	</apex:outputpanel>
	
	<TEXTAREA ID="holdtext" STYLE="display:none;">
	</TEXTAREA>
	
	<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>

</body>	
	
</apex:page>

 

I am not a Javascript expert, which is making this all harder for me. Please help!

 

Thanks,

 

Jeremy