Thursday, April 6, 2023

Web Design: Copy To Clipboard with an SVG Graphic!

 Been a long time since I've had time to post. Now, let's get into the meat of this. It's easy enough to copy to a clipboard in Javascript. I did that. Let's also talk using a graphical icon to make it not look like garbage. The Javascript code to copy to a clipboard looks something simple like this:


navigator.clipboard.writeText(document.getElementById("elementwithvalue").value);


Easy enough. Now, let's talk a dead simple icon that takes up little to no room and is easy enough to copy and alter.


<svg width="20px" height="20px">

<rect x="3" y="3" height="12px" width="12px" rx="3" ry="3" style="stroke-width:1;stroke:black;fill:white"/>

<rect x="7" y="7" height="12px" width="12px" rx="3" ry="3" style="stroke-width:1;stroke:black;fill:white"/>

</svg>


Easy enough, just a little black and white icon that looks close enough to the double paper thing to do a thing. All together it might look something like this:


<input type="text" id="kopimi">Something useful</input><button type="button" onclick="navigator.clipboard.writeText(document.getElementById('kopimi').value)" style="padding0;margin0"><svg width="20px" height="20px">

<rect x="3" y="3" height="12px" width="12px" rx="3" ry="3" style="stroke-width:1;stroke:black;fill:white"/>

<rect x="7" y="7" height="12px" width="12px" rx="3" ry="3" style="stroke-width:1;stroke:black;fill:white"/>

</svg></button>


And there you have it, a stupid little input box with a copy icon button. Enjoy, copy whatever.

Tag Cloud

.NET (2) A+ (5) ad ds (1) addon (4) Android (4) anonymous functions (1) application (9) arduino (1) artificial intelligence (1) backup (1) bash (6) camera (2) certifications (3) comptia (5) css (2) customize (11) encryption (3) error (13) exploit (5) ftp (1) funny (4) gadget (4) games (3) GUI (5) hardware (16) haskell (6) help (14) HTML (3) imaging (2) irc (1) it (1) java (2) javascript (13) jobs (1) Linux (19) lua (1) Mac (4) malware (1) math (6) msp (1) network (13) perl (2) php (3) plugin (2) powershell (8) privacy (2) programming (24) python (10) radio (2) regex (3) repair (2) security (16) sound (2) speakers (2) ssh (1) story (5) Techs from the Crypt (5) telnet (1) tools (13) troubleshooting (11) tutorial (9) Ubuntu (4) Unix (2) virtualization (2) web design (6) Windows (16) world of warcraft (1) wow (1) wx (1)