我无法让 Javascript 将文本复制到剪贴板

Question

如果可能的话，需要别人的一点帮助。

我正在为我的网站制作一个下拉菜单 DIV，它允许用户按下一个按钮并将各种符号的 HTML 字符代码复制到剪贴板。这还不是最终格式 - 我刚刚创建了一个简单的 HTML 页面来测试功能。

问题是它不起作用！我不确定我做错了什么。

这是我的 HTML，它结合了基本的内联样式表和 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>

如有任何帮助，我们将不胜感激。我知道这很简单，但对 Javascript 不是很好，我不知道从哪里开始！

Answer 1

元素 ID 应该是唯一的。

然而，要复制获取按钮值，您需要将 onclick 更改为以下示例

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

这将允许函数获取元素的属性。

该函数也需要修改以适应，您将需要进一步研究如何使用 copyText 变量来为您工作。

示例：

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

为了更好地实施此解决方案，您可以调用 window onload 事件侦听器并查找 table.

中关联的所有按钮

要继续这条路线，请为您的 table 提供一个标识符，在本示例中，我提供了 #clipboardTable。这将允许使用 querySelectorAll 为我们的按钮添加点击事件侦听器，并允许在 HTML 文档中使用更清晰的代码，从而允许删除重复的 onclick="copyFunction(this)"手动所有按钮。

Window 按钮的事件侦听器和单击事件侦听器

    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)
            })
        })
    })

复制功能可能与之前完成的一样。

查看此工作片段以证明概念。

<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>

Answer 2

首先正确定义 onlick 函数，而不是通过 id 获取元素，将元素作为引用传递给函数，这将消除为每个元素分配 id 的负担，并删除不必要的代码。最后 navigator.clipboard.writeText returns 一个 promise，因此应该正确使用它，否则它容易出错（即它会在第一次运行但如果您尝试复制另一个文本会抛出错误）

<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>

Answer 3

我要感谢所有回复的人。当我意识到我错得多么严重时，那真是一个面面相觑的时刻！

最后，我选择了 Aidan 的回答，因为它允许我用实际字符格式化按钮，同时给出我需要复制的 HTML 代码的值，以确保它与 PHP 它被送入。对于我的特定问题，按钮标签在这方面远远胜过输入标签。

这是完全修改后的代码，如果其他人需要类似的东西，他们就不需要再问这么愚蠢的问题了！

<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>

我无法让 Javascript 将文本复制到剪贴板

I can't get my Javascript to copy text to the clipboard

javascript

clipboard