`背景故事：我正在制作一个简单的参考书目网站，但在复制按钮上遇到了困难。即使使用了clipboardjs，按钮的复制功能也不起作用。
我非常绝望地向 ChatGPT 询问，无论他们建议什么，我都得到相同的结果：它不起作用！我希望这个网站上的人可以帮助我。我将在下面包含我的 HTML、CSS 和 JS。
'use strict';
document.addEventListener('DOMContentLoaded', function () {
var leftTextbox = document.getElementById('leftTextbox');
var inputTextArea = document.getElementById('inputTextArea');
var citationTextArea = document.querySelector('#rightTextbox textarea');
var copyButton = document.getElementById('copyButton'); // Add copy button reference
leftTextbox.addEventListener('click', function () {
this.classList.toggle('active');
});
inputTextArea.addEventListener('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
inputTextArea.addEventListener('keydown', function (event) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
citationTextArea.value += this.value + '\n';
this.value = '';
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
});
var clearButton = document.getElementById('clearButton');
clearButton.addEventListener('click', function () {
citationTextArea.value = '';
});
// Initialize Clipboard.js
var clipboard = new ClipboardJS(copyButton, {
text: function() {
return citationTextArea.value;
}
});
// Update success and error handling
clipboard.on('success', function(e) {
console.log('Text copied to clipboard:', e.text);
});
clipboard.on('error', function(e) {
console.error('Failed to copy text:', e.action);
});
});/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
main {
flex: 1; /* Allow main to take up remaining vertical space */
display: flex;
justify-content: space-around;
align-items: stretch;
padding: 20px;
}
.textbox {
width: 45%;
background-color: #fff;
display: flex;
flex-direction: column;
border: 2px solid #ddd; /* Set border width to 2px */
border-radius: 5px;
padding: 10px;
transition: border-color 0.3s; /* Add transition effect for border color */
position: relative; /* Add relative positioning */
}
.textbox.active {
border-color: black;
border-width: 2px; /* Increase border width for active state */
}
.textbox h2 {
margin-top: 0;
}
.textbox-content {
flex: 1; /* Allow textarea to take up remaining vertical space */
width: calc(100% - 20px); /* Adjust width for padding */
height: calc(100vh - 100px); /* Set height to fill remaining viewport height */
resize: none;
border: none;
outline: none;
background-color: transparent; /* Set transparent background color for text area */
font-size: 16px;
line-height: 1.5;
overflow-y: auto; /* Add scrollbar when necessary */
}
/* Add styles for the clear button container */
.textbox-action-buttons {
display: flex;
align-items: center;
margin-bottom: 10px; /* Add margin at the bottom */
}
/* Add styles for the clear button */
#clearButton,
#copyButton {
width: 30px; /* Set width of the button */
height: 30px; /* Set height of the button */
border: none;
background-color: #ccc;
color: #333;
font-size: 20px; /* Increase font size for the symbol */
line-height: 1;
cursor: pointer;
margin-right: 5px; /* Add some spacing between the buttons */
}
#clearButton:hover,
#copyButton:hover {
background-color: #999;
color: #fff;
}
#clearButton {
position: absolute;
top: 10px;
right: 5px;
}
#copyButton {
position: absolute;
top: 10px;
right: 50px
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bibby.io</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bibby.io</h1>
<h2>Easy Use MLA Formatting</h2>
</header>
<main>
<div class="textbox" id="leftTextbox">
<h2>Input</h2>
<textarea id="inputTextArea" class="textbox-content" placeholder="Enter text here..."></textarea>
</div>
<div class="textbox" id="rightTextbox">
<h2>Works Cited</h2>
<div class="textbox-action-buttons">
<button id="copyButton">⎘</button> <!-- Copy button -->
<button id="clearButton">✖</button> <!-- Delete button -->
</div>
<textarea id="citationTextArea" class="textbox-content" placeholder="" disabled></textarea>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script src="script.js" defer></script> <!-- Include the JavaScript file here with defer attribute -->
</body>
</html>我觉得我已经尝试了一切。
你有尝试过这种方法吗？
copyButton.addEventListener(()=> {
const dataToCopied = citationTextArea.value;
navigator.clipboard.writeText(dataToCopied )
.then(() => {
console.log('Content copied to clipboard!');
})
.catch(err => {
console.error('Could not copy content to clipboard: ', err);
});
})