Enable Double Click To Copy Code To Clipboard In Blogger

Adding a double-click feature to copy content to the clipboard can provide numerous advantages, particularly when it comes to user experience and convenience. This feature would be especially useful for mobile users since it can be quite difficult to highlight a lengthy piece of text or code and then copy it to the clipboard.

Here is the code to enable double-click to copy to the clipboard on a 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>

Make sure to assign the Class "copyableCode" to the Code box as shown in the video. You can use multiple Code boxes on 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.