Robert Moskowitz Posted May 29, 2019 Share Posted 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 Link to comment Share on other sites More sharing options...
Funce Posted May 30, 2019 Share Posted 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 30, 2019 Share Posted May 30, 2019 There is a javascript. trim() that remove whitespace from both ends. Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted May 30, 2019 Author Share Posted 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. Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted May 30, 2019 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted May 30, 2019 Author Share Posted 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted May 30, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted May 30, 2019 Author Share Posted 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... Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted May 30, 2019 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now