如果可能的話，需要一些人的幫助。
我正在為我的網站制作一個下拉 DIV，它允許用戶按下按鈕并將各種符號的 HTML 字符代碼復制到剪貼板。這還不是最終格式——我剛剛創建了一個簡單的 HTML 頁面來測驗功能。
問題是它不起作用！我不確定我做錯了什么。
這是我的 HTML，它結合了基本的內嵌樣式表和 Javascript：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Text Formatting</title>
<script>
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);
}
</script>
<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='<b>' id='charInput' class='charbutt' onclick=\"copyFunction\"><b></button></td>
<td class='chardisp'><button value='<i>' id='charInput' class='charbutt' onclick=\"copyFunction\"><i></button></td>
<td class='chardisp'><button value='<u>' id='charInput' class='charbutt' onclick=\"copyFunction\"><u></button></td>
<td class='chardisp'><button value='<b>[ ... ]</b>' id='charInput' class='charbutt' onclick=\"copyFunction\"><b>[ ... ]</b></button></td>
<td class='chardisp'><button value='<br/>' id='charInput' class='charbutt' onclick=\"copyFunction\"><br/></button></td>
</tr>
<tr>
<td colspan="5"><p class='charhead'>SYMBOLS</p></td>
</tr>
<tr>
<td class='chardisp'><button value='™' id='charInput' class='charbutt' onclick=\"copyFunction\">™</button></td>
<td class='chardisp'><button value='®' id='charInput' class='charbutt' onclick=\"copyFunction\">®</button></td>
<td class='chardisp'><button value='¡' id='charInput' class='charbutt' onclick=\"copyFunction\">¡</button></td>
<td class='chardisp'><button value='¿' id='charInput' class='charbutt' onclick=\"copyFunction\">¿</button></td>
<td class='chardisp'><button value='ß' id='charInput' class='charbutt' onclick=\"copyFunction\">ß</button></td>
</tr>
<tr>
<td class='chardisp'><button value='&' id='charInput' class='charbutt' onclick=\"copyFunction\">&</button></td>
<td class='chardisp'><button value='$quot;' id='charInput' class='charbutt' onclick=\"copyFunction\">"</button></td>
<td class='chardisp'><button value='£' id='charInput' class='charbutt' onclick=\"copyFunction\">£</button></td>
<td class='chardisp'><button value='€' id='charInput' class='charbutt' onclick=\"copyFunction\">€</button></td>
<td class='chardisp'><button value='$' id='charInput' class='charbutt' onclick=\"copyFunction\">$</button></td>
</tr>
<tr>
<td class='chardisp'><button value='¼' id='charInput' class='charbutt' onclick=\"copyFunction\">¼</button></td>
<td class='chardisp'><button value='⅓' id='charInput' class='charbutt' onclick=\"copyFunction\">⅓</button></td>
<td class='chardisp'><button value='⅔' id='charInput' class='charbutt' onclick=\"copyFunction\">⅔</button></td>
<td class='chardisp'><button value='½' id='charInput' class='charbutt' onclick=\"copyFunction\">½</button></td>
<td class='chardisp'><button value='¾' id='charInput' class='charbutt' onclick=\"copyFunction\">¾</button></td>
</tr>
<tr>
<td class='chardisp'><button value=':' id='charInput' class='charbutt' onclick=\"copyFunction\">:</button></td>
<td class='chardisp'><button value=';' id='charInput' class='charbutt' onclick=\"copyFunction\">;</button></td>
<td class='chardisp'><button value='♪' id='charInput' class='charbutt' onclick=\"copyFunction\">♪</button></td>
<td class='chardisp'><button value='#' id='charInput' class='charbutt' onclick=\"copyFunction\">#</button></td>
<td class='chardisp'><button value='/' id='charInput' class='charbutt' onclick=\"copyFunction\">/</button></td>
</tr>
<tr>
<td colspan="5"><p class='charhead'>ACCENTED CHARACTERS</p></td>
</tr>
<tr>
<td class='chardisp'><button value='À' id='charInput' class='charbutt' onclick=\"copyFunction\">À</button></td>
<td class='chardisp'><button value='Á' id='charInput' class='charbutt' onclick=\"copyFunction\">Á</button></td>
<td class='chardisp'><button value='Â' id='charInput' class='charbutt' onclick=\"copyFunction\">Â</button></td>
<td class='chardisp'><button value='Ã' id='charInput' class='charbutt' onclick=\"copyFunction\">Ã</button></td>
<td class='chardisp'><button value='Ä' id='charInput' class='charbutt' onclick=\"copyFunction\">Ä</button></td>
</tr>
<tr>
<td class='chardisp'><button value='à' id='charInput' class='charbutt' onclick=\"copyFunction\">à</button></td>
<td class='chardisp'><button value='á' id='charInput' class='charbutt' onclick=\"copyFunction\">á</button></td>
<td class='chardisp'><button value='â' id='charInput' class='charbutt' onclick=\"copyFunction\">â</button></td>
<td class='chardisp'><button value='ã' id='charInput' class='charbutt' onclick=\"copyFunction\">ã</button></td>
<td class='chardisp'><button value='ä' id='charInput' class='charbutt' onclick=\"copyFunction\">ä</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ç' id='charInput' class='charbutt' onclick=\"copyFunction\">Ç</button></td>
<td class='chardisp'><button value='ç' id='charInput' class='charbutt' onclick=\"copyFunction\">ç</button></td>
<td class='chardisp'><button value='È' id='charInput' class='charbutt' onclick=\"copyFunction\">È</button></td>
<td class='chardisp'><button value='É' id='charInput' class='charbutt' onclick=\"copyFunction\">É</button></td>
<td class='chardisp'><button value='Ê' id='charInput' class='charbutt' onclick=\"copyFunction\">Ê</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ë' id='charInput' class='charbutt' onclick=\"copyFunction\">Ë</button></td>
<td class='chardisp'><button value='è' id='charInput' class='charbutt' onclick=\"copyFunction\">è</button></td>
<td class='chardisp'><button value='é' id='charInput' class='charbutt' onclick=\"copyFunction\">é</button></td>
<td class='chardisp'><button value='ê' id='charInput' class='charbutt' onclick=\"copyFunction\">ê</button></td>
<td class='chardisp'><button value='ë' id='charInput' class='charbutt' onclick=\"copyFunction\">ë</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ì' id='charInput' class='charbutt' onclick=\"copyFunction\">Ì</button></td>
<td class='chardisp'><button value='Í' id='charInput' class='charbutt' onclick=\"copyFunction\">Í</button></td>
<td class='chardisp'><button value='Î' id='charInput' class='charbutt' onclick=\"copyFunction\">Î</button></td>
<td class='chardisp'><button value='Ï' id='charInput' class='charbutt' onclick=\"copyFunction\">Ï</button></td>
<td class='chardisp'><button value='ì' id='charInput' class='charbutt' onclick=\"copyFunction\">ì</button></td>
</tr>
<tr>
<td class='chardisp'><button value='í' id='charInput' class='charbutt' onclick=\"copyFunction\">í</button></td>
<td class='chardisp'><button value='î' id='charInput' class='charbutt' onclick=\"copyFunction\">î</button></td>
<td class='chardisp'><button value='ï' id='charInput' class='charbutt' onclick=\"copyFunction\">ï</button></td>
<td class='chardisp'><button value='Ò' id='charInput' class='charbutt' onclick=\"copyFunction\">Ò</button></td>
<td class='chardisp'><button value='Ó' id='charInput' class='charbutt' onclick=\"copyFunction\">Ó</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ô' id='charInput' class='charbutt' onclick=\"copyFunction\">Ô</button></td>
<td class='chardisp'><button value='Õ' id='charInput' class='charbutt' onclick=\"copyFunction\">Õ</button></td>
<td class='chardisp'><button value='Ö' id='charInput' class='charbutt' onclick=\"copyFunction\">Ö</button></td>
<td class='chardisp'><button value='ò' id='charInput' class='charbutt' onclick=\"copyFunction\">ò</button></td>
<td class='chardisp'><button value='ó' id='charInput' class='charbutt' onclick=\"copyFunction\">ó</button></td>
</tr>
<tr>
<td class='chardisp'><button value='ô' id='charInput' class='charbutt' onclick=\"copyFunction\">ô</button></td>
<td class='chardisp'><button value='õ' id='charInput' class='charbutt' onclick=\"copyFunction\">õ</button></td>
<td class='chardisp'><button value='ö' id='charInput' class='charbutt' onclick=\"copyFunction\">ö</button></td>
<td class='chardisp'><button value='Ù' id='charInput' class='charbutt' onclick=\"copyFunction\">Ù</button></td>
<td class='chardisp'><button value='Ú' id='charInput' class='charbutt' onclick=\"copyFunction\">Ú</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Û' id='charInput' class='charbutt' onclick=\"copyFunction\">Û</button></td>
<td class='chardisp'><button value='Ü' id='charInput' class='charbutt' onclick=\"copyFunction\">Ü</button></td>
<td class='chardisp'><button value='ù' id='charInput' class='charbutt' onclick=\"copyFunction\">ù</button></td>
<td class='chardisp'><button value='ú' id='charInput' class='charbutt' onclick=\"copyFunction\">ú</button></td>
<td class='chardisp'><button value='û' id='charInput' class='charbutt' onclick=\"copyFunction\">û</button></td>
</tr>
<tr>
<td class='chardisp'><button value='ü' id='charInput' class='charbutt' onclick=\"copyFunction\">ü</button></td>
<td class='chardisp'><button value='Ý' id='charInput' class='charbutt' onclick=\"copyFunction\">Ý</button></td>
<td class='chardisp'><button value='Ÿ' id='charInput' class='charbutt' onclick=\"copyFunction\">Ÿ</button></td>
<td class='chardisp'><button value='ý' id='charInput' class='charbutt' onclick=\"copyFunction\">ý</button></td>
<td class='chardisp'><button value='ÿ' id='charInput' class='charbutt' onclick=\"copyFunction\">ÿ</button></td>
</tr>
<tr>
</table>
</body>
</html>
對此的任何幫助將不勝感激。我知道這很簡單，但對 Javascript 不是很好，我不知道從哪里開始！
uj5u.com熱心網友回復：
元素 ID 應該是唯一的。
但是，要復制獲取按鈕值，您需要將 onclick 更改為以下示例
<td class='chardisp'><button value='<b>' id='charInput' class='charbutt' onclick="copyFunction(this)"><b></button></td>
這將允許函式獲取元素的屬性。
該函式也需要修改以適應，您需要進一步研究如何使用 copyText 變數來為您作業。
例子：
function copyFunction(element) {
let elementValue = element.value
navigator.clipboard.writeText(elementValue);
}
uj5u.com熱心網友回復：
首先正確定義 onlick 函式，而不是通過 id 獲取元素，將元素作為對函式的參考傳遞，這將消除為每個元素分配 id 的負擔，并洗掉不必要的代碼。最后 navigator.clipboard.writeText 回傳一個 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='<b>' id='charInput' class='charbutt' onclick=copyFunction(this)></input></td>
<td class='chardisp'><button value='<i>' id='charInput' class='charbutt' onclick=copyFunction(this)><i></button></td>
<td class='chardisp'><button value='<u>' id='charInput' class='charbutt' onclick=copyFunction(this)><u></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='<br/>' id='charInput' class='charbutt' onclick=copyFunction(this)><br/></button></td>
</tr>
<tr>
<td colspan="5"><p class='charhead'>SYMBOLS</p></td>
</tr>
<tr>
<td class='chardisp'><button value='™' id='charInput' class='charbutt' onclick=copyFunction(this)>™</button></td>
<td class='chardisp'><button value='®' id='charInput' class='charbutt' onclick=copyFunction(this)>®</button></td>
<td class='chardisp'><button value='¡' id='charInput' class='charbutt' onclick=copyFunction(this)>¡</button></td>
<td class='chardisp'><button value='¿' id='charInput' class='charbutt' onclick=copyFunction(this)>¿</button></td>
<td class='chardisp'><button value='ß' id='charInput' class='charbutt' onclick=copyFunction(this)>ß</button></td>
</tr>
<tr>
<td class='chardisp'><button value='&' id='charInput' class='charbutt' onclick=copyFunction(this)>&</button></td>
<td class='chardisp'><button value='$quot;' id='charInput' class='charbutt' onclick=copyFunction(this)>"</button></td>
<td class='chardisp'><button value='£' id='charInput' class='charbutt' onclick=copyFunction(this)>£</button></td>
<td class='chardisp'><button value='€' id='charInput' class='charbutt' onclick=copyFunction(this)>€</button></td>
<td class='chardisp'><button value='$' id='charInput' class='charbutt' onclick=copyFunction(this)>$</button></td>
</tr>
<tr>
<td class='chardisp'><button value='¼' id='charInput' class='charbutt' onclick=copyFunction(this)>¼</button></td>
<td class='chardisp'><button value='⅓' id='charInput' class='charbutt' onclick=copyFunction(this)>⅓</button></td>
<td class='chardisp'><button value='⅔' id='charInput' class='charbutt' onclick=copyFunction(this)>⅔</button></td>
<td class='chardisp'><button value='½' id='charInput' class='charbutt' onclick=copyFunction(this)>½</button></td>
<td class='chardisp'><button value='¾' id='charInput' class='charbutt' onclick=copyFunction(this)>¾</button></td>
</tr>
<tr>
<td class='chardisp'><button value=':' id='charInput' class='charbutt' onclick=copyFunction(this)>:</button></td>
<td class='chardisp'><button value=';' id='charInput' class='charbutt' onclick=copyFunction(this)>;</button></td>
<td class='chardisp'><button value='♪' id='charInput' class='charbutt' onclick=copyFunction(this)>♪</button></td>
<td class='chardisp'><button value='#' id='charInput' class='charbutt' onclick=copyFunction(this)>#</button></td>
<td class='chardisp'><button value='/' id='charInput' class='charbutt' onclick=copyFunction(this)>/</button></td>
</tr>
<tr>
<td colspan="5"><p class='charhead'>ACCENTED CHARACTERS</p></td>
</tr>
<tr>
<td class='chardisp'><button value='À' id='charInput' class='charbutt' onclick=copyFunction(this)>À</button></td>
<td class='chardisp'><button value='Á' id='charInput' class='charbutt' onclick=copyFunction(this)>Á</button></td>
<td class='chardisp'><button value='Â' id='charInput' class='charbutt' onclick=copyFunction(this)>Â</button></td>
<td class='chardisp'><button value='Ã' id='charInput' class='charbutt' onclick=copyFunction(this)>Ã</button></td>
<td class='chardisp'><button value='Ä' id='charInput' class='charbutt' onclick=copyFunction(this)>Ä</button></td>
</tr>
<tr>
<td class='chardisp'><button value='à' id='charInput' class='charbutt' onclick=copyFunction(this)>à</button></td>
<td class='chardisp'><button value='á' id='charInput' class='charbutt' onclick=copyFunction(this)>á</button></td>
<td class='chardisp'><button value='â' id='charInput' class='charbutt' onclick=copyFunction(this)>â</button></td>
<td class='chardisp'><button value='ã' id='charInput' class='charbutt' onclick=copyFunction(this)>ã</button></td>
<td class='chardisp'><button value='ä' id='charInput' class='charbutt' onclick=copyFunction(this)>ä</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ç' id='charInput' class='charbutt' onclick=copyFunction(this)>Ç</button></td>
<td class='chardisp'><button value='ç' id='charInput' class='charbutt' onclick=copyFunction(this)>ç</button></td>
<td class='chardisp'><button value='È' id='charInput' class='charbutt' onclick=copyFunction(this)>È</button></td>
<td class='chardisp'><button value='É' id='charInput' class='charbutt' onclick=copyFunction(this)>É</button></td>
<td class='chardisp'><button value='Ê' id='charInput' class='charbutt' onclick=copyFunction(this)>Ê</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ë' id='charInput' class='charbutt' onclick=copyFunction(this)>Ë</button></td>
<td class='chardisp'><button value='è' id='charInput' class='charbutt' onclick=copyFunction(this)>è</button></td>
<td class='chardisp'><button value='é' id='charInput' class='charbutt' onclick=copyFunction(this)>é</button></td>
<td class='chardisp'><button value='ê' id='charInput' class='charbutt' onclick=copyFunction(this)>ê</button></td>
<td class='chardisp'><button value='ë' id='charInput' class='charbutt' onclick=copyFunction(this)>ë</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ì' id='charInput' class='charbutt' onclick=copyFunction(this)>Ì</button></td>
<td class='chardisp'><button value='Í' id='charInput' class='charbutt' onclick=copyFunction(this)>Í</button></td>
<td class='chardisp'><button value='Î' id='charInput' class='charbutt' onclick=copyFunction(this)>Î</button></td>
<td class='chardisp'><button value='Ï' id='charInput' class='charbutt' onclick=copyFunction(this)>Ï</button></td>
<td class='chardisp'><button value='ì' id='charInput' class='charbutt' onclick=copyFunction(this)>ì</button></td>
</tr>
<tr>
<td class='chardisp'><button value='í' id='charInput' class='charbutt' onclick=copyFunction(this)>í</button></td>
<td class='chardisp'><button value='î' id='charInput' class='charbutt' onclick=copyFunction(this)>î</button></td>
<td class='chardisp'><button value='ï' id='charInput' class='charbutt' onclick=copyFunction(this)>ï</button></td>
<td class='chardisp'><button value='Ò' id='charInput' class='charbutt' onclick=copyFunction(this)>Ò</button></td>
<td class='chardisp'><button value='Ó' id='charInput' class='charbutt' onclick=copyFunction(this)>Ó</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Ô' id='charInput' class='charbutt' onclick=copyFunction(this)>Ô</button></td>
<td class='chardisp'><button value='Õ' id='charInput' class='charbutt' onclick=copyFunction(this)>Õ</button></td>
<td class='chardisp'><button value='Ö' id='charInput' class='charbutt' onclick=copyFunction(this)>Ö</button></td>
<td class='chardisp'><button value='ò' id='charInput' class='charbutt' onclick=copyFunction(this)>ò</button></td>
<td class='chardisp'><button value='ó' id='charInput' class='charbutt' onclick=copyFunction(this)>ó</button></td>
</tr>
<tr>
<td class='chardisp'><button value='ô' id='charInput' class='charbutt' onclick=copyFunction(this)>ô</button></td>
<td class='chardisp'><button value='õ' id='charInput' class='charbutt' onclick=copyFunction(this)>õ</button></td>
<td class='chardisp'><button value='ö' id='charInput' class='charbutt' onclick=copyFunction(this)>ö</button></td>
<td class='chardisp'><button value='Ù' id='charInput' class='charbutt' onclick=copyFunction(this)>Ù</button></td>
<td class='chardisp'><button value='Ú' id='charInput' class='charbutt' onclick=copyFunction(this)>Ú</button></td>
</tr>
<tr>
<td class='chardisp'><button value='Û' id='charInput' class='charbutt' onclick=copyFunction(this)>Û</button></td>
<td class='chardisp'><button value='Ü' id='charInput' class='charbutt' onclick=copyFunction(this)>Ü</button></td>
<td class='chardisp'><button value='ù' id='charInput' class='charbutt' onclick=copyFunction(this)>ù</button></td>
<td class='chardisp'><button value='ú' id='charInput' class='charbutt' onclick=copyFunction(this)>ú</button></td>
<td class='chardisp'><button value='û' id='charInput' class='charbutt' onclick=copyFunction(this)>û</button></td>
</tr>
<tr>
<td class='chardisp'><button value='ü' id='charInput' class='charbutt' onclick=copyFunction(this)>ü</button></td>
<td class='chardisp'><button value='Ý' id='charInput' class='charbutt' onclick=copyFunction(this)>Ý</button></td>
<td class='chardisp'><button value='Ÿ' id='charInput' class='charbutt' onclick=copyFunction(this)>Ÿ</button></td>
<td class='chardisp'><button value='ý' id='charInput' class='charbutt' onclick=copyFunction(this)>ý</button></td>
<td class='chardisp'><button value='ÿ' id='charInput' class='charbutt' onclick=copyFunction(this)>ÿ</button></td>
</tr>
<tr>
</table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/357673.html
標籤：javascript 剪贴板