Html Question posted in
Some basic documentation can be found here.

Html – Trying to create a "copy" button for my website, isn't working

`Backstory: I’m making a simple bibliography website and am struggling on the copy button. Even after using clipboardjs, the copy feature of the button isn’t working.

I got so desperate to where I asked ChatGPT, and no matter what they suggest, I come up with the same result: it doesn’t work! I was hoping someone on this website could help me. I will include my HTML, CSS, and JS below.

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

I feel like I tried everything.

Tags:

3

Answers


  1. 0

    Have you try this way?

    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);
    });
})
    Login or Signup to reply.
  2. 0

    Using vanilla JS, I use a function like this:

    function copyToClipboard(e) {
    e.preventDefault(); // Prevent default behavior
    e.stopPropagation(); // Stop from bubbling up so it's only triggered once
    let content = document.getElementById("citationTextArea").value; // Get the content to copy
    navigator.clipboard.writeText(content); // Write the content to the clipboard
}

    And then would update the copy button in HTML like this:

    <button id="copyButton" onclick="copyToClipboard(event);return false;">&#x2398;</button>

    One reason why it might not appear to be working is because of browser security. If you’re working on a localhost site, or a site without a valid SSL, there’s a good chance your browser is just blocking that feature. It’s also pretty finnicky if you’re trying to do that within iframes as well.

    For example, I got it working here in this CodePen demo, but if I were to put it in a snippet here, it wouldn’t work because the snippets on this site use iframes to display it.

    Login or Signup to reply.
  3. 0

    The code works well. It just needs you to hit the Enter button from the keyboard to trigger action move text from input field to Works Cited field. Then you can use the copy button. Because the copy button only copy text from Works Cited field.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search