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.
No comments:
Post a Comment