Enable Double Click to Copy Code to Clipboard in Blogger

In this article, I will show you how you can enable double click to copy functionality in your Blogger website.

YouTube video

Adding a double-click functionality to copy content to the clipboard offers several benefits, particularly in the context of user experience and convenience. It will be helpful for Mobile Users as it is quite challenging to highlight a long piece of Text or code and then copy it to the clipboard.

Here is the code to Enable Double click to Copy to Clipboard on the Blogger website. 

<style>
        .bottom-alert {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #204ecf;
            color: #fff;
            padding: 10px;
            text-align: center;
            display: none;
            width: 200px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
           z-index: 999999;
        }
    </style>
<div class='bottom-alert' id='bottomAlert'>Code Copied!</div>

<script>
    var codeElements = document.querySelectorAll(".copyableCode");
    codeElements.forEach(function(element) {
        element.addEventListener("dblclick", function() {
            copyToClipboard(element);
        });
    });
    function copyToClipboard(element) {
        var tempTextArea = document.createElement("textarea");
        tempTextArea.value = element.textContent;
        document.body.appendChild(tempTextArea);
        tempTextArea.select();
        tempTextArea.setSelectionRange(0, 99999); 
        document.execCommand("copy");
        document.body.removeChild(tempTextArea);
        
        showBottomAlert();
    }
    function showBottomAlert() {
        var bottomAlert = document.getElementById("bottomAlert");
        bottomAlert.style.display = "block";
        setTimeout(function() {
            bottomAlert.style.display = "none";
        }, 3000);
    }
</script>

Don’t forget to assign the Class (copyableCode) on the Code box as shown in the video. You can use multiple Code boxes within the same page and it will work seamlessly. 

Note: Using our Tool, you can Parse your HTML Codes before using them in the code box.

If you have any doubts, Please ask in the Comment section or Our Telegram Group.

Related Articles..

Leave a Reply

Your email address will not be published. Required fields are marked *