Robert Moskowitz

Robert Moskowitz · May 29, 2019

I am trying to add a button to a Div section to copy to the clipboard. I found some javascript at:

https://edupala.com/copy-div-content-clipboard/

That works with one caveat. That is there always seems to be a space at the beginning of the content copied to the clipboard (at least with Firefox browser).

Can anyone help me get that space out of the copy? I cannot find a copy div to clipboard here on w3schools. This impacts some of my div blocks that have content that is pasted into other commands.

thanks

Funce · May 30, 2019

Have you seen this How-To?

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

And I can't see the content of the link you posted. Could you paste some code?

dsonesuk · May 30, 2019

There is a javascript. trim() that remove whitespace from both ends.

Robert Moskowitz · May 30, 2019

5 hours ago, Funce said:

Have you seen this How-To?

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

And I can't see the content of the link you posted. Could you paste some code

I cannot get that howto to work with a div block.

Here is the code I have tried:

<body>


<blockquote>
	<div id="box1" style="border:1px solid black;width:550px;height:90px;overflow-y:hidden;overflow-x:auto;">
	sed -i "s|append|& cpuidle.off=1 \<br>
	console=tty1 console=ttySAC2,115200n8 \<br>
	rd.driver.pre=ledtrig-heartbeat,xhci-plat-hcd no_bL_switcher|" \<br>
	/mnt/__boot/extlinux/extlinux.conf<br>
</div>
<button onclick="copyClipboard('box1')">Copy text</button>
</blockquote>


<script>
function copyClipboard(x) {
  var elm = document.getElementById(x);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied div content to clipboard");
  }
}
</script>
	
</body>

A friend tried this in Chrome and reports he did not have a problem with a leading space, so it might bve a Firefox arttifact.

Robert Moskowitz · May 30, 2019

5 hours ago, dsonesuk said:

There is a javascript. trim() that remove whitespace from both ends.

Ah, and that would trim it for FIrefox and not impact Chrome (if what we are seeing is correct).

But I am not an objects person. In that script above, what do I trim()?

thanks

Robert Moskowitz · May 30, 2019

Now I am not sure it is a space at the beginning of the first line. It shows as a space when I paste into terminal, vim in insert, or mousepad. Nothing shows when I paste into Libreword, but it goes into a boxed set of lines.

How can I display what ever that first character is? I have simplified my code by learning how to use the style margin-left:

<div id="box1" style="border:1px solid black;margin-left:40px;width:550px;
height:90px;overflow-y:hidden;overflow-x:auto;">
	sed -i "s|append|& cpuidle.off=1 \<br>
	console=tty1 console=ttySAC2,115200n8 \<br>
	rd.driver.pre=ledtrig-heartbeat,xhci-plat-hcd no_bL_switcher|" \<br>
	/mnt/__boot/extlinux/extlinux.conf<br>
</div>
<button style="margin-left:40px" onclick="copyClipboard('box1')">Copy text</button>

dsonesuk · May 30, 2019

It might be to due to how text is stacked below the surrounding div container as each break is treated as empty whitespace.

Robert Moskowitz · May 30, 2019

1 hour ago, dsonesuk said:

It might be to due to how text is stacked below the surrounding div container as each break is treated as empty whitespace.

I am to wed to using a div container for the text, other than I have howtos with dozens of such blocks. See:

www.htt-consult.com/arm.html

I am updating these pages with better formatting in the div style part. And adding the copy button.

If there is some other container that will show nicely, and simply. Can be selected and manually copied to the clipboard, and can have a javascipt button to copy to the clipboard, I am interested.

Or just figure this out and get it working...

Robert Moskowitz · May 30, 2019

With some help on the Fedora users list (asking for an editor that would show the UTF-8 value of that character), I have been told that it IS a space in Firefox and does not exist in Chrome.

So can someone help me add trim() to my script?

thanks

Sign In

Robert Moskowitz

Recommended Posts