0

Need a little help from someone if that's possible.

I'm crafting a drop-down DIV for my website which allows users to press a button and have the HTML character code for a variety of symbols copied to the clipboard. This is not yet in its final format - I've just created a simple HTML page to test the functionality.

The issue is that it doesn't work! I'm not sure what I've done wrong.

Here's my HTML which combines a basic in-line stylesheet and the Javascript:

function copyFunction() { /* Get the text field */ var copyText = document.getElementById("charInput"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ navigator.clipboard.writeText(copyText.value); }
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Text Formatting</title> <style> body { background-color: #309bbf; } .chardisp { width: 40px; text-align: center; } .charhead { font-family: sans-serif; font-size: 14px; color: white; } .charbutt { width: 100%; background-color: white; border-radius: 2px; padding: 3px; font-family: sans-serif; font-size: 11px; color: black; outline: 0; } .charbutt:hover { cursor: pointer; } </style> </head> <body> <table border="0"> <tr> <td colspan="5"><p class='charhead'>FORMATTING</p></td> </tr> <tr> <td class='chardisp'><button value='&lt;b&gt;' id='charInput' class='charbutt' onclick=\"copyFunction\">&lt;b&gt;</button></td> <td class='chardisp'><button value='&lt;i&gt;' id='charInput' class='charbutt' onclick=\"copyFunction\">&lt;i&gt;</button></td> <td class='chardisp'><button value='&lt;u&gt;' id='charInput' class='charbutt' onclick=\"copyFunction\">&lt;u&gt;</button></td> <td class='chardisp'><button value='<b>[ ... ]</b>' id='charInput' class='charbutt' onclick=\"copyFunction\"><b>[ ... ]</b></button></td> <td class='chardisp'><button value='&lt;br&#47;&gt;' id='charInput' class='charbutt' onclick=\"copyFunction\">&lt;br&#47;&gt;</button></td> </tr> <tr> <td colspan="5"><p class='charhead'>SYMBOLS</p></td> </tr> <tr> <td class='chardisp'><button value='&trade;' id='charInput' class='charbutt' onclick=\"copyFunction\">&trade;</button></td> <td class='chardisp'><button value='&reg;' id='charInput' class='charbutt' onclick=\"copyFunction\">&reg;</button></td> <td class='chardisp'><button value='&#161;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#161;</button></td> <td class='chardisp'><button value='&#191;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#191;</button></td> <td class='chardisp'><button value='&#223;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#223;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;' id='charInput' class='charbutt' onclick=\"copyFunction\">&amp;</button></td> <td class='chardisp'><button value='$quot;' id='charInput' class='charbutt' onclick=\"copyFunction\">&quot;</button></td> <td class='chardisp'><button value='&pound;' id='charInput' class='charbutt' onclick=\"copyFunction\">&pound;</button></td> <td class='chardisp'><button value='&euro;' id='charInput' class='charbutt' onclick=\"copyFunction\">&euro;</button></td> <td class='chardisp'><button value='&#36;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#36;</button></td> </tr> <tr> <td class='chardisp'><button value='&#188;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#188;</button></td> <td class='chardisp'><button value='&#8531;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#8531;</button></td> <td class='chardisp'><button value='&#8532;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#8532;</button></td> <td class='chardisp'><button value='&#189;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#189;</button></td> <td class='chardisp'><button value='&#190;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#190;</button></td> </tr> <tr> <td class='chardisp'><button value='&#58;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#58;</button></td> <td class='chardisp'><button value='&#59;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#59;</button></td> <td class='chardisp'><button value='&#9834;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#9834;</button></td> <td class='chardisp'><button value='&#35;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#35;</button></td> <td class='chardisp'><button value='&#47;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#47;</button></td> </tr> <tr> <td colspan="5"><p class='charhead'>ACCENTED CHARACTERS</p></td> </tr> <tr> <td class='chardisp'><button value='&#192;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#192;</button></td> <td class='chardisp'><button value='&#193;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#193;</button></td> <td class='chardisp'><button value='&#194;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#194;</button></td> <td class='chardisp'><button value='&#195;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#195;</button></td> <td class='chardisp'><button value='&#196;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#196;</button></td> </tr> <tr> <td class='chardisp'><button value='&#224;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#224;</button></td> <td class='chardisp'><button value='&#225;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#225;</button></td> <td class='chardisp'><button value='&#226;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#226;</button></td> <td class='chardisp'><button value='&#227;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#227;</button></td> <td class='chardisp'><button value='&#228;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#228;</button></td> </tr> <tr> <td class='chardisp'><button value='&#199;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#199;</button></td> <td class='chardisp'><button value='&#231;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#231;</button></td> <td class='chardisp'><button value='&#200;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#200;</button></td> <td class='chardisp'><button value='&#201;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#201;</button></td> <td class='chardisp'><button value='&#202;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#202;</button></td> </tr> <tr> <td class='chardisp'><button value='&#203;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#203;</button></td> <td class='chardisp'><button value='&#232;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#232;</button></td> <td class='chardisp'><button value='&#233;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#233;</button></td> <td class='chardisp'><button value='&#234;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#234;</button></td> <td class='chardisp'><button value='&#235;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#235;</button></td> </tr> <tr> <td class='chardisp'><button value='&#204;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#204;</button></td> <td class='chardisp'><button value='&#205;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#205;</button></td> <td class='chardisp'><button value='&#206;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#206;</button></td> <td class='chardisp'><button value='&#207;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#207;</button></td> <td class='chardisp'><button value='&#236;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#236;</button></td> </tr> <tr> <td class='chardisp'><button value='&#237;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#237;</button></td> <td class='chardisp'><button value='&#238;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#238;</button></td> <td class='chardisp'><button value='&#239;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#239;</button></td> <td class='chardisp'><button value='&#210;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#210;</button></td> <td class='chardisp'><button value='&#211;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#211;</button></td> </tr> <tr> <td class='chardisp'><button value='&#212;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#212;</button></td> <td class='chardisp'><button value='&#213;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#213;</button></td> <td class='chardisp'><button value='&#214;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#214;</button></td> <td class='chardisp'><button value='&#242;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#242;</button></td> <td class='chardisp'><button value='&#243;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#243;</button></td> </tr> <tr> <td class='chardisp'><button value='&#244;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#244;</button></td> <td class='chardisp'><button value='&#245;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#245;</button></td> <td class='chardisp'><button value='&#246;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#246;</button></td> <td class='chardisp'><button value='&#217;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#217;</button></td> <td class='chardisp'><button value='&#218;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#218;</button></td> </tr> <tr> <td class='chardisp'><button value='&#219;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#219;</button></td> <td class='chardisp'><button value='&#220;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#220;</button></td> <td class='chardisp'><button value='&#249;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#249;</button></td> <td class='chardisp'><button value='&#250;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#250;</button></td> <td class='chardisp'><button value='&#251;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#251;</button></td> </tr> <tr> <td class='chardisp'><button value='&#252;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#252;</button></td> <td class='chardisp'><button value='&#221;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#221;</button></td> <td class='chardisp'><button value='&#159;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#159;</button></td> <td class='chardisp'><button value='&#253;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#253;</button></td> <td class='chardisp'><button value='&#255;' id='charInput' class='charbutt' onclick=\"copyFunction\">&#255;</button></td> </tr> <tr> </table> </body> </html>

Any help with this would be HUGELY appreciated. I know it's something simple but not being very good with Javascript, I don't know where to start!

Improve this question
4
  • You are using the same id for every button? Commented Nov 16, 2021 at 16:21
  • 2
    id should be unique for each element Commented Nov 16, 2021 at 16:23
  • Three problem by just looking at it 1) onclick event is not firing use copyFunction() 2) Same id for each element 3) select() is not a function Commented Nov 16, 2021 at 16:26
  • copyText.select(); copyText.setSelectionRange will only work for input element not for buttons developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/… Commented Nov 16, 2021 at 16:36

3 Answers 3

Reset to default
1

Element ID's should be unique.

However to copy the get the button value you need to change the onclick to an example of the following

<td class='chardisp'><button value='&lt;b&gt;' id='charInput' class='charbutt' onclick="copyFunction(this)">&lt;b&gt;</button></td>

This will allow the function to get the element's attributes.

The function will need modified also to suit, you will need to look further into how you are working the copyText variable to work for you.

Example:

 function copyFunction(element) { let elementValue = element.value navigator.clipboard.writeText(elementValue); }

To better implement this solution, you could invoke a window onload event listener and look for all buttons associated within your table.

To proceed on this route give your table an identifier, in this example I gave #clipboardTable. This will then allow use to use the querySelectorAll to add the click event listener for our buttons and allow for cleaner code within the HTML document, thus allow for removal of the onclick="copyFunction(this)" being repeated over all the buttons manually.

Window event listener and click event listener for buttons

 window.addEventListener("load", (e) => { // Find all buttons let buttons = document.querySelectorAll("#clipboardTable button"); buttons.forEach(button => { // Add event listener to each button button.addEventListener("click", event => { copyFunction(event.target) }) }) })

The copy function may remain the same as completed previously.

See this working snippet to prove concept. 

<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1252'> <title>Text Formatting</title> <script> // Window on load event listener window.addEventListener("load", (e) => { // Find all buttons let buttons = document.querySelectorAll("#clipboardTable button"); buttons.forEach(button => { // Add event listener to each button button.addEventListener("click", event => { copyFunction(event.target) }) }) }) function copyFunction(element) { let elementValue = element.value navigator.clipboard.writeText(elementValue); } </script> <style> body { background-color: #309bbf; } .chardisp { width: 70px; text-align: center; } .charhead { font-family: sans-serif; font-size: 14px; color: white; } .charbutt { width: 100%; background-color: white; border: 1px solid white; border-radius: 2px; padding: 3px; font-family: sans-serif; font-size: 11px; color: black; outline: 0; } .charbutt:hover { cursor: pointer; } </style> </head> <body> <table id="clipboardTable" border='0'> <tr> <td colspan='5'><p class='charhead'>FORMATTING</p></td> </tr> <tr> <td class='chardisp'><button value='<b>...</b>' class='charbutt' >&lt;b&gt;</button></td> <td class='chardisp'><button value='<i>...</i>' class='charbutt' >&lt;i&gt;</button></td> <td class='chardisp'><button value='<u>...</u>' class='charbutt' >&lt;u&gt;</button></td> <td class='chardisp'><button value='<b>[...]</b>' class='charbutt' ><b>[...]</b></button></td> <td class='chardisp'><button value='<br/>' class='charbutt' >&lt;br&#47;&gt;</button></td> </tr> <tr> <td colspan='5'><p class='charhead'>SYMBOLS</p></td> </tr> <tr> <td class='chardisp'><button value='&amp;trade;' class='charbutt' >&trade;</button></td> <td class='chardisp'><button value='&amp;reg;' class='charbutt' >&reg;</button></td> <td class='chardisp'><button value='&amp;#161;' class='charbutt' >&#161;</button></td> <td class='chardisp'><button value='&amp;#191;' class='charbutt' >&#191;</button></td> <td class='chardisp'><button value='&amp;#223;' class='charbutt' >&#223;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;amp;' class='charbutt' >&amp;</button></td> <td class='chardisp'><button value='&amp;quot;' class='charbutt' >&quot;</button></td> <td class='chardisp'><button value='&amp;pound;' class='charbutt' >&pound;</button></td> <td class='chardisp'><button value='&amp;euro;' class='charbutt' >&euro;</button></td> <td class='chardisp'><button value='&amp;#36;' class='charbutt' >&#36;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#188;' class='charbutt' >&#188;</button></td> <td class='chardisp'><button value='&amp;#8531;' class='charbutt' >&#8531;</button></td> <td class='chardisp'><button value='&amp;#8532;' class='charbutt' >&#8532;</button></td> <td class='chardisp'><button value='&amp;#189;' class='charbutt' >&#189;</button></td> <td class='chardisp'><button value='&amp;#190;' class='charbutt' >&#190;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#58;' class='charbutt' >&#58;</button></td> <td class='chardisp'><button value='&amp;#59;' class='charbutt' >&#59;</button></td> <td class='chardisp'><button value='&amp;#9834;' class='charbutt' >&#9834;</button></td> <td class='chardisp'><button value='&amp;#35;' class='charbutt' >&#35;</button></td> <td class='chardisp'><button value='&amp;#47;' class='charbutt' >&#47;</button></td> </tr> <tr> <td colspan='5'><p class='charhead'>ACCENTED CHARACTERS</p></td> </tr> <tr> <td class='chardisp'><button value='&amp;#192;' class='charbutt' >&#192;</button></td> <td class='chardisp'><button value='&amp;#193;' class='charbutt' >&#193;</button></td> <td class='chardisp'><button value='&amp;#194;' class='charbutt' >&#194;</button></td> <td class='chardisp'><button value='&amp;#195;' class='charbutt' >&#195;</button></td> <td class='chardisp'><button value='&amp;#196;' class='charbutt' >&#196;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#224;' class='charbutt' >&#224;</button></td> <td class='chardisp'><button value='&amp;#225;' class='charbutt' >&#225;</button></td> <td class='chardisp'><button value='&amp;#226;' class='charbutt' >&#226;</button></td> <td class='chardisp'><button value='&amp;#227;' class='charbutt' >&#227;</button></td> <td class='chardisp'><button value='&amp;#228;' class='charbutt' >&#228;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#199;' class='charbutt' >&#199;</button></td> <td class='chardisp'><button value='&amp;#231;' class='charbutt' >&#231;</button></td> <td class='chardisp'><button value='&amp;#200;' class='charbutt' >&#200;</button></td> <td class='chardisp'><button value='&amp;#201;' class='charbutt' >&#201;</button></td> <td class='chardisp'><button value='&amp;#202;' class='charbutt' >&#202;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#203;' class='charbutt' >&#203;</button></td> <td class='chardisp'><button value='&amp;#232;' class='charbutt' >&#232;</button></td> <td class='chardisp'><button value='&amp;#233;' class='charbutt' >&#233;</button></td> <td class='chardisp'><button value='&amp;#234;' class='charbutt' >&#234;</button></td> <td class='chardisp'><button value='&amp;#235;' class='charbutt' >&#235;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#204;' class='charbutt' >&#204;</button></td> <td class='chardisp'><button value='&amp;#205;' class='charbutt' >&#205;</button></td> <td class='chardisp'><button value='&amp;#206;' class='charbutt' >&#206;</button></td> <td class='chardisp'><button value='&amp;#207;' class='charbutt' >&#207;</button></td> <td class='chardisp'><button value='&amp;#236;' class='charbutt' >&#236;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#237;' class='charbutt' >&#237;</button></td> <td class='chardisp'><button value='&amp;#238;' class='charbutt' >&#238;</button></td> <td class='chardisp'><button value='&amp;#239;' class='charbutt' >&#239;</button></td> <td class='chardisp'><button value='&amp;#210;' class='charbutt' >&#210;</button></td> <td class='chardisp'><button value='&amp;#211;' class='charbutt' >&#211;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#212;' class='charbutt' >&#212;</button></td> <td class='chardisp'><button value='&amp;#213;' class='charbutt' >&#213;</button></td> <td class='chardisp'><button value='&amp;#214;' class='charbutt' >&#214;</button></td> <td class='chardisp'><button value='&amp;#242;' class='charbutt' >&#242;</button></td> <td class='chardisp'><button value='&amp;#243;' class='charbutt' >&#243;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#244;' class='charbutt' >&#244;</button></td> <td class='chardisp'><button value='&amp;#245;' class='charbutt' >&#245;</button></td> <td class='chardisp'><button value='&amp;#246;' class='charbutt' >&#246;</button></td> <td class='chardisp'><button value='&amp;#217;' class='charbutt' >&#217;</button></td> <td class='chardisp'><button value='&amp;#218;' class='charbutt' >&#218;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#219;' class='charbutt' >&#219;</button></td> <td class='chardisp'><button value='&amp;#220;' class='charbutt' >&#220;</button></td> <td class='chardisp'><button value='&amp;#249;' class='charbutt' >&#249;</button></td> <td class='chardisp'><button value='&amp;#250;' class='charbutt' >&#250;</button></td> <td class='chardisp'><button value='&amp;#251;' class='charbutt' >&#251;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#252;' class='charbutt' >&#252;</button></td> <td class='chardisp'><button value='&amp;#221;' class='charbutt' >&#221;</button></td> <td class='chardisp'><button value='&amp;#159;' class='charbutt' >&#159;</button></td> <td class='chardisp'><button value='&amp;#253;' class='charbutt' >&#253;</button></td> <td class='chardisp'><button value='&amp;#255;' class='charbutt' >&#255;</button></td> </tr> <tr> <td colspan='5'><p class='charhead'>INPUT TEST</p></td> </tr> <tr> <td colspan='5'><textarea style='width: 100%'></textarea></td> </tr> </table> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Awesome. Now I can use the <button> tag as well. Can't thank you enough.
1

Firstly define the onlick function properly and instead of the getting the element by id pass the element as reference to the function this will remove the burden of assigning id to each element and also remove the unnecessary code. Lastly navigator.clipboard.writeText returns a promise so it should be used properly otherwise its error prone (i.e. it will work the first time but will throw an error if you will try to copy another text)

<script> function copyFunction(e) { navigator.clipboard.writeText(e.value).then(function() { /* clipboard successfully set */ }, function() { /* clipboard write failed */ }); } </script> <table border="0"> <tr> <td colspan="5"><p class='charhead'>FORMATTING</p></td> </tr> <tr> <td class='chardisp'><input type="button" value='&lt;b&gt;' id='charInput' class='charbutt' onclick=copyFunction(this)></input></td> <td class='chardisp'><button value='&lt;i&gt;' id='charInput' class='charbutt' onclick=copyFunction(this)>&lt;i&gt;</button></td> <td class='chardisp'><button value='&lt;u&gt;' id='charInput' class='charbutt' onclick=copyFunction(this)>&lt;u&gt;</button></td> <td class='chardisp'><button value='<b>[ ... ]</b>' id='charInput' class='charbutt' onclick=copyFunction(this)><b>[ ... ]</b></button></td> <td class='chardisp'><button value='&lt;br&#47;&gt;' id='charInput' class='charbutt' onclick=copyFunction(this)>&lt;br&#47;&gt;</button></td> </tr> <tr> <td colspan="5"><p class='charhead'>SYMBOLS</p></td> </tr> <tr> <td class='chardisp'><button value='&trade;' id='charInput' class='charbutt' onclick=copyFunction(this)>&trade;</button></td> <td class='chardisp'><button value='&reg;' id='charInput' class='charbutt' onclick=copyFunction(this)>&reg;</button></td> <td class='chardisp'><button value='&#161;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#161;</button></td> <td class='chardisp'><button value='&#191;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#191;</button></td> <td class='chardisp'><button value='&#223;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#223;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;' id='charInput' class='charbutt' onclick=copyFunction(this)>&amp;</button></td> <td class='chardisp'><button value='$quot;' id='charInput' class='charbutt' onclick=copyFunction(this)>&quot;</button></td> <td class='chardisp'><button value='&pound;' id='charInput' class='charbutt' onclick=copyFunction(this)>&pound;</button></td> <td class='chardisp'><button value='&euro;' id='charInput' class='charbutt' onclick=copyFunction(this)>&euro;</button></td> <td class='chardisp'><button value='&#36;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#36;</button></td> </tr> <tr> <td class='chardisp'><button value='&#188;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#188;</button></td> <td class='chardisp'><button value='&#8531;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#8531;</button></td> <td class='chardisp'><button value='&#8532;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#8532;</button></td> <td class='chardisp'><button value='&#189;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#189;</button></td> <td class='chardisp'><button value='&#190;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#190;</button></td> </tr> <tr> <td class='chardisp'><button value='&#58;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#58;</button></td> <td class='chardisp'><button value='&#59;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#59;</button></td> <td class='chardisp'><button value='&#9834;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#9834;</button></td> <td class='chardisp'><button value='&#35;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#35;</button></td> <td class='chardisp'><button value='&#47;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#47;</button></td> </tr> <tr> <td colspan="5"><p class='charhead'>ACCENTED CHARACTERS</p></td> </tr> <tr> <td class='chardisp'><button value='&#192;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#192;</button></td> <td class='chardisp'><button value='&#193;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#193;</button></td> <td class='chardisp'><button value='&#194;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#194;</button></td> <td class='chardisp'><button value='&#195;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#195;</button></td> <td class='chardisp'><button value='&#196;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#196;</button></td> </tr> <tr> <td class='chardisp'><button value='&#224;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#224;</button></td> <td class='chardisp'><button value='&#225;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#225;</button></td> <td class='chardisp'><button value='&#226;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#226;</button></td> <td class='chardisp'><button value='&#227;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#227;</button></td> <td class='chardisp'><button value='&#228;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#228;</button></td> </tr> <tr> <td class='chardisp'><button value='&#199;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#199;</button></td> <td class='chardisp'><button value='&#231;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#231;</button></td> <td class='chardisp'><button value='&#200;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#200;</button></td> <td class='chardisp'><button value='&#201;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#201;</button></td> <td class='chardisp'><button value='&#202;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#202;</button></td> </tr> <tr> <td class='chardisp'><button value='&#203;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#203;</button></td> <td class='chardisp'><button value='&#232;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#232;</button></td> <td class='chardisp'><button value='&#233;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#233;</button></td> <td class='chardisp'><button value='&#234;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#234;</button></td> <td class='chardisp'><button value='&#235;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#235;</button></td> </tr> <tr> <td class='chardisp'><button value='&#204;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#204;</button></td> <td class='chardisp'><button value='&#205;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#205;</button></td> <td class='chardisp'><button value='&#206;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#206;</button></td> <td class='chardisp'><button value='&#207;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#207;</button></td> <td class='chardisp'><button value='&#236;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#236;</button></td> </tr> <tr> <td class='chardisp'><button value='&#237;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#237;</button></td> <td class='chardisp'><button value='&#238;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#238;</button></td> <td class='chardisp'><button value='&#239;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#239;</button></td> <td class='chardisp'><button value='&#210;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#210;</button></td> <td class='chardisp'><button value='&#211;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#211;</button></td> </tr> <tr> <td class='chardisp'><button value='&#212;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#212;</button></td> <td class='chardisp'><button value='&#213;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#213;</button></td> <td class='chardisp'><button value='&#214;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#214;</button></td> <td class='chardisp'><button value='&#242;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#242;</button></td> <td class='chardisp'><button value='&#243;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#243;</button></td> </tr> <tr> <td class='chardisp'><button value='&#244;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#244;</button></td> <td class='chardisp'><button value='&#245;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#245;</button></td> <td class='chardisp'><button value='&#246;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#246;</button></td> <td class='chardisp'><button value='&#217;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#217;</button></td> <td class='chardisp'><button value='&#218;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#218;</button></td> </tr> <tr> <td class='chardisp'><button value='&#219;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#219;</button></td> <td class='chardisp'><button value='&#220;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#220;</button></td> <td class='chardisp'><button value='&#249;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#249;</button></td> <td class='chardisp'><button value='&#250;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#250;</button></td> <td class='chardisp'><button value='&#251;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#251;</button></td> </tr> <tr> <td class='chardisp'><button value='&#252;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#252;</button></td> <td class='chardisp'><button value='&#221;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#221;</button></td> <td class='chardisp'><button value='&#159;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#159;</button></td> <td class='chardisp'><button value='&#253;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#253;</button></td> <td class='chardisp'><button value='&#255;' id='charInput' class='charbutt' onclick=copyFunction(this)>&#255;</button></td> </tr> <tr> </table>
Improve this answer

1 Comment

Thank you. That was a real face-palm moment! You're a star. Works like a dream. Thank you, in fact, to all those who replied. I needed a little shove in the right direction and that's exactly what I got!
0

I want to thank all those who replied. It was a real face-palm moment when I realised just how badly I'd got it wrong!

In the end, I opted for Aidan's answer because it allows me to format the button with the actual character whilst giving the value of the HTML code I need copied to ensure that it's compatible with the PHP it's being fed into. For my particular issue, a button tag far outshines an input tag in this regard.

Here's the fully revised code so that should anyone else need something similar, they don't need to ask such a stupid question again!

<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1252'> <title>Text Formatting</title> <script> function copyFunction(element) { let elementValue = element.value navigator.clipboard.writeText(elementValue); } </script> <style> body { background-color: #309bbf; } .chardisp { width: 70px; text-align: center; } .charhead { font-family: sans-serif; font-size: 14px; color: white; } .charbutt { width: 100%; background-color: white; border: 1px solid white; border-radius: 2px; padding: 3px; font-family: sans-serif; font-size: 11px; color: black; outline: 0; } .charbutt:hover { cursor: pointer; } </style> </head> <body> <table border='0'> <tr> <td colspan='5'><p class='charhead'>FORMATTING</p></td> </tr> <tr> <td class='chardisp'><button value='<b>...</b>' class='charbutt' onclick=copyFunction(this)>&lt;b&gt;</button></td> <td class='chardisp'><button value='<i>...</i>' class='charbutt' onclick=copyFunction(this)>&lt;i&gt;</button></td> <td class='chardisp'><button value='<u>...</u>' class='charbutt' onclick=copyFunction(this)>&lt;u&gt;</button></td> <td class='chardisp'><button value='<b>[...]</b>' class='charbutt' onclick=copyFunction(this)><b>[...]</b></button></td> <td class='chardisp'><button value='<br/>' class='charbutt' onclick=copyFunction(this)>&lt;br&#47;&gt;</button></td> </tr> <tr> <td colspan='5'><p class='charhead'>SYMBOLS</p></td> </tr> <tr> <td class='chardisp'><button value='&amp;trade;' class='charbutt' onclick=copyFunction(this)>&trade;</button></td> <td class='chardisp'><button value='&amp;reg;' class='charbutt' onclick=copyFunction(this)>&reg;</button></td> <td class='chardisp'><button value='&amp;#161;' class='charbutt' onclick=copyFunction(this)>&#161;</button></td> <td class='chardisp'><button value='&amp;#191;' class='charbutt' onclick=copyFunction(this)>&#191;</button></td> <td class='chardisp'><button value='&amp;#223;' class='charbutt' onclick=copyFunction(this)>&#223;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;amp;' class='charbutt' onclick=copyFunction(this)>&amp;</button></td> <td class='chardisp'><button value='&amp;quot;' class='charbutt' onclick=copyFunction(this)>&quot;</button></td> <td class='chardisp'><button value='&amp;pound;' class='charbutt' onclick=copyFunction(this)>&pound;</button></td> <td class='chardisp'><button value='&amp;euro;' class='charbutt' onclick=copyFunction(this)>&euro;</button></td> <td class='chardisp'><button value='&amp;#36;' class='charbutt' onclick=copyFunction(this)>&#36;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#188;' class='charbutt' onclick=copyFunction(this)>&#188;</button></td> <td class='chardisp'><button value='&amp;#8531;' class='charbutt' onclick=copyFunction(this)>&#8531;</button></td> <td class='chardisp'><button value='&amp;#8532;' class='charbutt' onclick=copyFunction(this)>&#8532;</button></td> <td class='chardisp'><button value='&amp;#189;' class='charbutt' onclick=copyFunction(this)>&#189;</button></td> <td class='chardisp'><button value='&amp;#190;' class='charbutt' onclick=copyFunction(this)>&#190;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#58;' class='charbutt' onclick=copyFunction(this)>&#58;</button></td> <td class='chardisp'><button value='&amp;#59;' class='charbutt' onclick=copyFunction(this)>&#59;</button></td> <td class='chardisp'><button value='&amp;#9834;' class='charbutt' onclick=copyFunction(this)>&#9834;</button></td> <td class='chardisp'><button value='&amp;#35;' class='charbutt' onclick=copyFunction(this)>&#35;</button></td> <td class='chardisp'><button value='&amp;#47;' class='charbutt' onclick=copyFunction(this)>&#47;</button></td> </tr> <tr> <td colspan='5'><p class='charhead'>ACCENTED CHARACTERS</p></td> </tr> <tr> <td class='chardisp'><button value='&amp;#192;' class='charbutt' onclick=copyFunction(this)>&#192;</button></td> <td class='chardisp'><button value='&amp;#193;' class='charbutt' onclick=copyFunction(this)>&#193;</button></td> <td class='chardisp'><button value='&amp;#194;' class='charbutt' onclick=copyFunction(this)>&#194;</button></td> <td class='chardisp'><button value='&amp;#195;' class='charbutt' onclick=copyFunction(this)>&#195;</button></td> <td class='chardisp'><button value='&amp;#196;' class='charbutt' onclick=copyFunction(this)>&#196;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#224;' class='charbutt' onclick=copyFunction(this)>&#224;</button></td> <td class='chardisp'><button value='&amp;#225;' class='charbutt' onclick=copyFunction(this)>&#225;</button></td> <td class='chardisp'><button value='&amp;#226;' class='charbutt' onclick=copyFunction(this)>&#226;</button></td> <td class='chardisp'><button value='&amp;#227;' class='charbutt' onclick=copyFunction(this)>&#227;</button></td> <td class='chardisp'><button value='&amp;#228;' class='charbutt' onclick=copyFunction(this)>&#228;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#199;' class='charbutt' onclick=copyFunction(this)>&#199;</button></td> <td class='chardisp'><button value='&amp;#231;' class='charbutt' onclick=copyFunction(this)>&#231;</button></td> <td class='chardisp'><button value='&amp;#200;' class='charbutt' onclick=copyFunction(this)>&#200;</button></td> <td class='chardisp'><button value='&amp;#201;' class='charbutt' onclick=copyFunction(this)>&#201;</button></td> <td class='chardisp'><button value='&amp;#202;' class='charbutt' onclick=copyFunction(this)>&#202;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#203;' class='charbutt' onclick=copyFunction(this)>&#203;</button></td> <td class='chardisp'><button value='&amp;#232;' class='charbutt' onclick=copyFunction(this)>&#232;</button></td> <td class='chardisp'><button value='&amp;#233;' class='charbutt' onclick=copyFunction(this)>&#233;</button></td> <td class='chardisp'><button value='&amp;#234;' class='charbutt' onclick=copyFunction(this)>&#234;</button></td> <td class='chardisp'><button value='&amp;#235;' class='charbutt' onclick=copyFunction(this)>&#235;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#204;' class='charbutt' onclick=copyFunction(this)>&#204;</button></td> <td class='chardisp'><button value='&amp;#205;' class='charbutt' onclick=copyFunction(this)>&#205;</button></td> <td class='chardisp'><button value='&amp;#206;' class='charbutt' onclick=copyFunction(this)>&#206;</button></td> <td class='chardisp'><button value='&amp;#207;' class='charbutt' onclick=copyFunction(this)>&#207;</button></td> <td class='chardisp'><button value='&amp;#236;' class='charbutt' onclick=copyFunction(this)>&#236;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#237;' class='charbutt' onclick=copyFunction(this)>&#237;</button></td> <td class='chardisp'><button value='&amp;#238;' class='charbutt' onclick=copyFunction(this)>&#238;</button></td> <td class='chardisp'><button value='&amp;#239;' class='charbutt' onclick=copyFunction(this)>&#239;</button></td> <td class='chardisp'><button value='&amp;#210;' class='charbutt' onclick=copyFunction(this)>&#210;</button></td> <td class='chardisp'><button value='&amp;#211;' class='charbutt' onclick=copyFunction(this)>&#211;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#212;' class='charbutt' onclick=copyFunction(this)>&#212;</button></td> <td class='chardisp'><button value='&amp;#213;' class='charbutt' onclick=copyFunction(this)>&#213;</button></td> <td class='chardisp'><button value='&amp;#214;' class='charbutt' onclick=copyFunction(this)>&#214;</button></td> <td class='chardisp'><button value='&amp;#242;' class='charbutt' onclick=copyFunction(this)>&#242;</button></td> <td class='chardisp'><button value='&amp;#243;' class='charbutt' onclick=copyFunction(this)>&#243;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#244;' class='charbutt' onclick=copyFunction(this)>&#244;</button></td> <td class='chardisp'><button value='&amp;#245;' class='charbutt' onclick=copyFunction(this)>&#245;</button></td> <td class='chardisp'><button value='&amp;#246;' class='charbutt' onclick=copyFunction(this)>&#246;</button></td> <td class='chardisp'><button value='&amp;#217;' class='charbutt' onclick=copyFunction(this)>&#217;</button></td> <td class='chardisp'><button value='&amp;#218;' class='charbutt' onclick=copyFunction(this)>&#218;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#219;' class='charbutt' onclick=copyFunction(this)>&#219;</button></td> <td class='chardisp'><button value='&amp;#220;' class='charbutt' onclick=copyFunction(this)>&#220;</button></td> <td class='chardisp'><button value='&amp;#249;' class='charbutt' onclick=copyFunction(this)>&#249;</button></td> <td class='chardisp'><button value='&amp;#250;' class='charbutt' onclick=copyFunction(this)>&#250;</button></td> <td class='chardisp'><button value='&amp;#251;' class='charbutt' onclick=copyFunction(this)>&#251;</button></td> </tr> <tr> <td class='chardisp'><button value='&amp;#252;' class='charbutt' onclick=copyFunction(this)>&#252;</button></td> <td class='chardisp'><button value='&amp;#221;' class='charbutt' onclick=copyFunction(this)>&#221;</button></td> <td class='chardisp'><button value='&amp;#159;' class='charbutt' onclick=copyFunction(this)>&#159;</button></td> <td class='chardisp'><button value='&amp;#253;' class='charbutt' onclick=copyFunction(this)>&#253;</button></td> <td class='chardisp'><button value='&amp;#255;' class='charbutt' onclick=copyFunction(this)>&#255;</button></td> </tr> <tr> <td colspan='5'><p class='charhead'>INPUT TEST</p></td> </tr> <tr> <td colspan='5'><textarea style='width: 100%'></textarea></td> </tr> </table> </body> </html>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.